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);

};