解决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
·
在使用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
与展示的内容一致即可
更多推荐
已为社区贡献1条内容
所有评论(0)