一、背景
最近半年本人一直在做B端的项目，技术栈是vue3。众所周知，B端的项目少不了表单、输入框等组件，因此我选择的是antd-vue组件库
之前三年的经验都是做C端，完全没有接触过B端的项目，对表单组件的使用也没有那么如鱼得水，就在最近做的一次项目中，我发现了一个隐藏很久的bug
业务场景就是做一个下拉搜索框，本来我有做一个公共组件，使用antd的select组件封装了一个支持分页模糊搜索的组件，之前也用于其他项目且并没有什么问题，想着直接使用就行了，但是，问题发生了！！
二、问题表现
当输入 ‘z’进行模糊搜索时，后端返回3条数据，但是前端下拉option列表里只展示一条数据
上代码
<a-select
ref="selectRef"
v-model:value="value"
:showSearch="true"
:showArrow="false"
:placeholder=$props.placeholder
@search="selectSearchHandler"
@popupScroll="popupScroll"
@change="selectChangeHandler"
@touchmove.native.prevent
@blur="blurHandler"
label-in-value
/>
这么一看并没有什么问题对不对？？
三、问题探究解决
用过antd的select组件的人都知道，select组件最重要的就是option的key和value，select组件的一些api都是和key、value绑定的。
这时候我开始分析业务逻辑：option展示的是英文名（eName）, 因此value=eName, key取了每条数据的id，按照正常逻辑，模糊搜索的范围就是数据的eName，但是！！！
我们这里产品要求搜索的范围是英文名和中文名（cName），这时的我灵光乍现，会不会是因为value的值和实际搜索范围不同导致的。
我开始在官方文档中搜索，这时我发现官方例子中有一个api，我貌似没有用过，如下：
这是什么东西，我用了这么久都没加过这个api？？？
下面是官方对这个api的释义
我简单理解一下 就是这个参数默认是true，也就是它默认根据输入值，对当前数据进行筛选，筛选的范围就是select组件的value。比如这里组件的value是eName，它就是自己根据eName进行筛选。突然，我悟了！！！！
我看了下后端返回的数据，类似下面这种：
[{id: 1, eName: 'zaaa', cName: 'ssss'}, {id: 1, eName: 'aaa', cName: 'szsss'}， {id: 1, eName: 'bbaaa', cName: 'ssszs'}]
可以看到，三条数据中只有一条数据的eName中有’z’, 所以是组件自己给过滤了。。。。
我尝试把 ‘filter-option’这个属性改为false，果然问题解决了！！！
四、总结
- 仔细看文档！仔细看文档！仔细看文档！官方文档的任何一个字都不是白写的。
- 正常业务上的数据一般都是后端返回的，模糊搜索也是由后端来实现，前端在业务中是尽量减少对数据的处理，因此组件库中的一些默认属性也许并不适用于实际业务。
- 如果大家还遇到过类似这种问题可以在评论区留言，大家一起避坑。
