关于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)=>)} 

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。