antd vue a-select 搜索

数据结构 

  list: [{ name: "序号", id: 0, show: true },{ name: "出库单编号", id: 1, show: false },{ name: "wbs元素", id: 2, show: true },{ name: "序号1", id: 3, show: true },{ name: "出库单编号1", id: 4, show: false },{ name: "wbs元素1", id: 5, show: true },{ name: "序号2", id: 6, show: true },{ name: "出库单编号2", id: 7, show: false },{ name: "wbs元素2", id: 8, show: true },{ name: "序号3", id: 9, show: true },{ name: "出库单编号3", id: 10, show: false },{ name: "wbs元素3", id: 11, show: true },{ name: "序号4", id: 12, show: true },{ name: "出库单编号4", id: 13, show: false },{ name: "wbs元素4", id: 14, show: true },],

html

                <a-select v-model="state.searchValue" show-search placeholder="字段名称" class='w-[70%]':filter-option="filterOption" @change="handleChange" :options="state.list" :fieldNames="{label: 'name',value: 'id',}" allowClear></a-select>// fieldNames 配置label和value 中 在数组中使用的字段

js  搜索过滤

const filterOption = (input, option) => {return (option?.name ?? "").includes(input);};