vue3+antd select选择器实现下拉框筛选

如图：

实现前：

实现后：

        图一：先增加可搜索功能：

        图二：实现搜索项结果：

背景：

        当使用下拉框进行选择时，下拉框数据过多的话会影响操作，特此加了个搜索项。

实现：

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的结构进行比较