antd中select搜索框改变搜索值问题怎么解决

Ant Design of Vue中select搜索框改变搜索值

问题和原因

在文档里有select的搜索demo，但是通常用到select的时候展示的是name，而获得的是id，同样在搜索的时候用户一般只用搜索name，而在antd中加上show-search后发现是按id搜索，而不是name。

   
     
       {{ item.name }}
     
   
 

principalList.value = [
   {
     id: 1,
     value: 1,
     name: "张三",
   },
   {
     id: 2,
     value: 2,
     name: "李四",
   },
   {
     id: 3,
     value: 3,
     name: "王五",
   },
];

Ant Design of Vue 默认用的是value进行搜索。

修改

在antd中上增加 optionFilterProp="label"，上增加label字段即可。

   
     {{ item.name }}
   
 

PS: element中的select搜索

而在element中的select中加上搜索，直接在加上filterable即可，并且默认是搜索label。

antd select等组件可搜索问题

Select 添加 showSearch 属性可以实现搜索功能，但是这个搜索是搜的Select的value值的,但是value值在页面上是看不到的

一般用户搜索的是下拉框显示看到的内容，所以需要加上 optionFilterProp=“children” 这个属性就可以搜索看到的内容了

    {options.map((item,index)=>)}