antd-vue中的下拉选择框搜索失效的问题
Hi,最近在开发中(vue3+TS)遇到了antd-vue中的下拉选择框，案例说看官方文档就能实现的，但是这个选择框自带了搜索功能，最后搜索功能失效。如图：该下拉框可以搜索。
但是搜索会失效:
那么怎么解决呢？
1.首先我们来了解下代码:
//结构:<a-selectv-model:value="userOption"mode="multiple"style="width: 100%"placeholder="请选择用户":options="userOptionArr"@change="optionChange":showArrow="true"optionFilterProp="label"></a-select>//解释：v-model:value//默认选中的元素 当mode="multiple"时，值是数组。mode="multiple"//多选:options="userOptionArr"//下拉选择狂的选项。@change="optionChange"//选择框变化触发的事件:showArrow="true"//显示箭头optionFilterProp="label"//重点！！！搜索时过滤对应的 option 属性，不支持 children
好的，上面具体不明白的去看一下官方文档(这里),我们来重点讲解一下解决问题的关键：
optionFilterProp="label"//官方说的是搜索时过滤对应的 option 属性，不支持 children//意思就是当输入内容时会对下拉框做一个过滤操作。//那么该属性有两个值：label和value(默认)。//我们的下拉框绑定的数据是这样的:数据由value(值)和label(下拉框展示的标签)组成:我们之前之所以搜索失效是因为我们的过滤是按照value来的。const userOptionArr= ref([[{value: 'fgfjdh',label: 'admin',},{value: 'dfsdfd',label: 'dragon',},],
解决:
所以我们只需要把optionFilterProp的值设置为label即可:
optionFilterProp="label"
成功图片：
