解决Ant Design Vue的select搜索框只能搜索value

在使用a-select的搜索框功能时, 默认搜索的是options的value值

例如:

<a-select show-search>
	<a-select-option value="one">选项1</a-select-option>
	<a-select-option value="two">选项2</a-select-option>
	<a-select-option value="three">选项3</a-select-option>
</a-select>

当输入选项时

结果为空, 因为select-search默认找的是对应的value

输入[one]时, 展示结果[选项1]

---

那如何使检索结果为option对应的内容呢

可以使用a-select的optionFilterProp属性
代码如下:

<a-select show-search optionFilterProp="label">
  	<a-select-option label="选项1" value="one">选项1</a-select-option>
   	<a-select-option label="选项2" value="two">选项2</a-select-option>
   	<a-select-option label="选项3" value="three">选项3</a-select-option>
</a-select>

检索结果如下

指定optionFilterProp属性的值为label, 在option标签内定义label属性, 检索的结果就从label中去找

---

作用于v-for

<a-select 
  show-search
  optionFilterProp="label"
>
  <a-select-option
    v-for="item in managerOptions"
    :key="item.id"
    :value="item.id"
    :label="item.name"
   >{{ item.name }}</a-select-option>
</a-select>

指定label与展示的内容一致即可