el-input搜索条件过多，如何设置下拉菜单，只显示第一行，点击下拉按钮触发，显示其他未显示的筛选条件。
el-input搜索条件过多，如何设置下拉菜单，只显示第一行，点击下拉按钮触发，显示其他未显示的筛选条件。
<div class="flex" >
<div style="width:100px;">汇总跟单表</div>
<div style="margin-left: 10px;width:80%;" >
<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" class="filter-item" style="width:220px;" :picker-options="pickerOptions" @change="handleDateChange">
</el-date-picker>
<el-input v-model="queryList.ywh" placeholder="业务号" class="filter-item" style="width:100px;" @keyup.enter.native="handleFilter">
</el-input>
<el-input v-model="queryList.cghth" placeholder="采购合同号" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input>
<el-input v-model="queryList.gys" placeholder="供应商" class="filter-item" style="width:100px;" @keyup.enter.native="handleFilter">
</el-input>
<el-input v-model="queryList.hm" placeholder="货名" class="filter-item" style="width:100px;" @keyup.enter.native="handleFilter">
</el-input>
<el-input v-model="queryList.fkje" placeholder="付款金额" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input>
<!-- <el-date-picker v-model="queryList.fkrq" placeholder="付款日期" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-date-picker> -->
<el-input v-model="queryList.fhsl" placeholder="发货数量" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input>
<!-- <el-input v-model="queryList.fhrq" placeholder="发货日期" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input> -->
<el-input v-model="queryList.spje" placeholder="收票金额" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input>
<!-- <el-input v-model="queryList.sprq" placeholder="收票日期" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input> -->
<el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input>
<el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input> <el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input> <el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input> <el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
@keyup.enter.native="handleFilter">
</el-input>
</div>
<div style="width:200px;display: flex; margin-left: auto;" >
<el-button type="primary" icon="el-icon-search" @click="fetchData()"> 查询 </el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</div>
</div>
你的想法很精致，非常在意用户体验，时间不多，大概解释一下我的思路：
要实现在el-input搜索条件过多时，点击下拉按钮触发显示其他未显示的筛选条件，可以考虑使用Vue.js和Element UI的组件来实现。单单使用组件是不能实现的，还是需要配合脚本来实现，您看着代码理解一下大概逻辑和处理过程：
<template>
<div class="flex">
<div style="width: 100px;">汇总跟单表</div>
<div style="margin-left: 10px; width: 80%;">
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="filter-item"
style="width: 220px;"
:picker-options="pickerOptions"
@change="handleDateChange"
></el-date-picker>
<!-- 其他搜索条件 -->
<div v-for="(item, index) in visibleInputs" :key="index">
<el-input
v-model="queryList[item.model]"
:placeholder="item.placeholder"
class="filter-item"
style="width:100px;"
@keyup.enter.native="handleFilter"
></el-input>
</div>
<!-- 下拉按钮 -->
<el-button type="default" icon="el-icon-arrow-down" @click="toggleMoreFilters">
更多条件
</el-button>
</div>
<div style="width: 200px; display: flex; margin-left: auto;">
<el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value2: '', // 日期选择器的值
pickerOptions: {
// 日期选择器的配置选项
},
queryList: {
ywh: '',
cghth: '',
gys: '',
hm: '',
fkje: '',
fhsl: '',
spje: '',
spsl: '',
},
visibleInputs: ['ywh', 'cghth', 'gys'], // 初始显示的搜索条件
isMoreFiltersVisible: false, // 是否显示更多条件
};
},
methods: {
handleDateChange(val) {
// 处理日期选择器值变化
},
handleFilter() {
// 处理筛选操作
},
toggleMoreFilters() {
this.isMoreFiltersVisible = !this.isMoreFiltersVisible;
},
fetchData() {
// 查询数据
},
resetData() {
// 清空数据
},
},
};
</script>
在代码中可以看到，使用了一个visibleInputs数组来控制初始显示的搜索条件，点击"更多条件"按钮时切换显示更多的搜索条件。你可以根据实际需要修改visibleInputs数组，以及根据搜索条件的数量动态控制显示的搜索条件。同时，你需要在toggleMoreFilters方法中切换isMoreFiltersVisible的值来实现显示/隐藏更多条件。这只是一个大概的演示，具体的操作您需要根据自己业务进行处理，感谢，希望可以一起交流学习，非常乐意私信交流！！！
结合GPT给出回答如下请题主参考
可以使用el-select来解决这个问题。下面提供一个示例代码：
<template>
<div class="flex">
<el-select v-model="selectedItem" @change="handleChange" placeholder="请选择条件" style="width: 200px">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-button type="primary" icon="el-icon-arrow-down" @click="toggleOptions"></el-button>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
isShowOptions: false,
options: [
{ label: '条件1', value: 'condition1' },
{ label: '条件2', value: 'condition2' },
{ label: '条件3', value: 'condition3' },
{ label: '条件4', value: 'condition4' },
{ label: '条件5', value: 'condition5' },
{ label: '条件6', value: 'condition6' },
{ label: '条件7', value: 'condition7' },
{ label: '条件8', value: 'condition8' },
{ label: '条件9', value: 'condition9' },
{ label: '条件10', value: 'condition10' }
],
showOptions: [
{ label: '条件1', value: 'condition1' },
{ label: '条件2', value: 'condition2' },
{ label: '条件3', value: 'condition3' }
]
}
},
methods: {
handleChange(value) {
console.log(value)
},
toggleOptions() {
this.isShowOptions = !this.isShowOptions
}
}
}
</script>
以上代码的实现方式是使用el-select来进行筛选条件的选择，当选择的条件超过3个时，会显示一个下拉按钮，点击下拉按钮可以显示其他未显示的筛选条件。
具体实现的思路是：
- 定义一个
options数组，其中每个元素代表一个可选的筛选条件； - 定义一个
showOptions数组，并将前三个元素赋值为options数组的前三个元素，用于显示在下拉框中； - 定义一个
isShowOptions状态来标记是否显示大于三个的筛选条件； - 在
toggleOptions方法中，切换isShowOptions状态； - 在
el-select组件中，使用v-if判断是否显示下拉按钮，当isShowOptions为true时显示下拉按钮； - 在
点击下拉按钮事件中，如果isShowOptions为false，则将showOptions数组重新赋值为options数组，如果为true则将showOptions数组重新赋值为options数组的前三个元素。
以上代码仅提供一个思路，具体实现可以根据需求进行修改。
你可以使用 el-select 组件来创建一个下拉菜单，然后在点击下拉按钮时触发显示其他筛选条件的事件。
<template>
<div class="flex">
<div style="width: 100px;">汇总跟单表</div>
<div style="margin-left: 10px; width: 80%;">
<!-- el-select 下拉菜单 -->
<el-select v-model="selectedFilter" placeholder="选择筛选条件" @change="handleFilterChange">
<el-option label="日期范围" value="dateRange"></el-option>
<el-option label="业务号" value="ywh"></el-option>
<el-option label="采购合同号" value="cghth"></el-option>
<!-- 添加更多筛选条件 -->
</el-select>
<!-- 根据选择的筛选条件显示相应的输入框 -->
<el-input v-if="selectedFilter === 'dateRange'" v-model="queryList.dateRange" placeholder="日期范围" class="filter-item" style="width: 220px;"></el-input>
<el-input v-else-if="selectedFilter === 'ywh'" v-model="queryList.ywh" placeholder="业务号" class="filter-item" style="width: 100px;"></el-input>
<el-input v-else-if="selectedFilter === 'cghth'" v-model="queryList.cghth" placeholder="采购合同号" class="filter-item" style="width: 100px;"></el-input>
<!-- 添加更多筛选条件的输入框 -->
<!-- 查询按钮和清空按钮 -->
<el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedFilter: '', // 选择的筛选条件
queryList: {
dateRange: '', // 日期范围
ywh: '', // 业务号
cghth: '', // 采购合同号
// 添加更多筛选条件的数据
}
};
},
methods: {
handleFilterChange() {
// 在这里处理筛选条件切换时的逻辑
},
fetchData() {
// 在这里处理查询逻辑
},
resetData() {
// 在这里处理清空逻辑
}
}
};
</script>
使用 el-select 来创建一个下拉菜单，然后根据选择的筛选条件动态显示相应的输入框。你可以根据需要继续添加更多的筛选条件和相应的输入框。在 handleFilterChange 方法中，你可以编写逻辑来处理筛选条件切换时的事件。这样，当用户点击下拉按钮时，就可以选择不同的筛选条件来显示相应的输入框。
可以用el-collapse组件来搞，
参考这个文章
https://www.cnblogs.com/hellocampo/p/17467582.html
引用 皆我百晓生 小程序回复内容作答：
要实现 el-input 的下拉菜单只显示第一行，点击下拉按钮触发显示其他未显示的筛选条件，你可以使用 Element UI 的 el-dropdown 组件结合 el-input 组件完成。
首先，在 el-input 标签内部添加一个 el-dropdown 标签，并设置其trigger属性为 "click"：
<el-input v-model="queryList.ywh" placeholder="业务号" class="filter-item" style="width:100px;" @keyup.enter.native="handleFilter">
<el-dropdown trigger="click">
<i class="el-input__icon el-icon-arrow-down"></i>
<el-dropdown-menu slot="dropdown">
<!-- 其他筛选条件 -->
</el-dropdown-menu>
</el-dropdown>
</el-input>
然后，在 el-dropdown-menu 标签中添加其他筛选条件的 el-dropdown-item 标签。需要注意的是，el-dropdown-menu 中只能放置 el-dropdown-item 标签，并且每个 el-dropdown-item 标签里都应该设置一个 @click 事件处理函数来处理用户选择的筛选条件。
<el-dropdown-item @click="handleCondition('condition1')">筛选条件1</el-dropdown-item>
<el-dropdown-item @click="handleCondition('condition2')">筛选条件2</el-dropdown-item>
<el-dropdown-item @click="handleCondition('condition3')">筛选条件3</el-dropdown-item>
<!-- 其他筛选条件 -->
最后，在 @click 事件处理函数中，你可以根据用户选择的筛选条件来进行相应的处理。比如，根据用户选择的筛选条件来更新 el-input 组件的输入值，或者执行其他相关操作。
请注意，你需要根据实际需求进行相应的样式调整来保证下拉菜单的显示效果。以上是一个基本的实现思路，你可以通过修改和扩展代码来满足你的具体需求。
【以下回答由 GPT 生成】
问题标题: 如何在el-input组件中设置下拉或下拉菜单来应对搜索条件过多的情况？
问题标签: vue.js
问题内容: 我使用了el-input组件进行搜索，但是当搜索条件过多时，如何设置下拉或下拉菜单来解决这个问题？
问题详情：
<div class="flex">
<div style="width:100px;">汇总跟单表</div>
<div style="margin-left: 10px;width:80%;">
<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" class="filter-item" style="width:220px;"
:picker-options="pickerOptions" @change="handleDateChange">
</el-date-picker>
<el-select v-model="queryList.ywh" placeholder="业务号" class="filter-item" style="width:100px;"
@change="handleFilter">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<el-select v-model="queryList.cghth" placeholder="采购合同号" class="filter-item" style="width:100px;"
@change="handleFilter">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<el-select v-model="queryList.gys" placeholder="供应商" class="filter-item" style="width:100px;"
@change="handleFilter">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</div>
</div>
请帮助我优化上述问题，使其更易于理解和回答。谢谢！
【相关推荐】
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7632917
- 这篇博客你也可以参考下：el-input输入框，el-input 搜索框 描述框 文本框 常用样式总结
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
建议参考这个文章