如图:
实现前:
实现后:
图一:先增加可搜索功能:
图二:实现搜索项结果:
背景:
当使用下拉框进行选择时,下拉框数据过多的话会影响操作,特此加了个搜索项。
实现:
1、先在a-select标签上加入show-search属性,即支持搜索项;
<a-select v-model:value="firstSearchName" allowClear @change="firstSelectChange" placeholder="请选择要查询的条件" show-search :filter-option="filterOption">
2、:filter-option="filterOption"是展示搜索后的的结果
方法:
const filterOption = (input: string, option: any) => {
// 查找与option.value对应的label
const label = searchTitleList.value.find(item => item.value === option.value)?.label || '';
// 根据label来过滤
return label.toLowerCase().includes(input.toLowerCase());
}
说明:
我是在filterOption方法中通过当前输入的值所在的对象的value和全量下拉框的value做比较,筛选出来符合条件的进行展示。
html:
<a-select
v-model:value="firstSearchName"
allowClear
@change="firstSelectChange"
placeholder="请选择要查询的条件"
show-search
:filter-option="filterOption">
<a-select-option
v-for="(item, i) in searchTitleList"
:key="i"
:value="item.value" >
{{ item.label }}
</a-select-option>
</a-select>
js:
const filterOption = (input: string, option: any) => {
// 查找与option.value对应的label
const label = searchTitleList.value.find(item => item.value === option.value)?.label || '';
// 根据label来过滤
return label.toLowerCase().includes(input.toLowerCase());
}
searchTitleList.value的数据结构为:
{
"key": 0,
"value": "facility_identifier",
"disabled": false
}
提示:请根据searchTitleList.value的结构进行比较