在使用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
当输入选项时
在这里插入图片描述
结果为空, 因为select-search默认找的是对应的value
在这里插入图片描述
输入[one]时, 展示结果[选项1]


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

可以使用a-selectoptionFilterProp属性
代码如下:

<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与展示的内容一致即可

Logo

前往低代码交流专区

更多推荐