The problem that the drop-down selection box search in antd-vue fails
Hi, I recently encountered a drop-down selection box in antd-vue during development (vue3+TS). The case says that it can be realized by reading the official document, but this selection box has a search function, and the search function fails in the end. As shown in the picture: the drop-down box can be searched.
But the search fails:
so how to fix it?
1. First, let's understand the code:
//结构:
<a-select
v-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
Okay, if you don’t understand the details above, take a look at the official document ( here ), let’s focus on explaining the key to solving the problem:
optionFilterProp="label"
//官方说的是搜索时过滤对应的 option 属性,不支持 children
//意思就是当输入内容时会对下拉框做一个过滤操作。
//那么该属性有两个值:label和value(默认)。
//我们的下拉框绑定的数据是这样的:数据由value(值)和label(下拉框展示的标签)组成:我们之前之所以搜索失效是因为我们的过滤是按照value来的。
const userOptionArr= ref([
[
{
value: 'fgfjdh',
label: 'admin',
},
{
value: 'dfsdfd',
label: 'dragon',
},
],
Solution:
So we only need to set the value of optionFilterProp to label:
optionFilterProp="label"
Success picture: