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

最新推荐文章于 2025-03-27 14:50:58 发布

Xx_Zz_

最新推荐文章于 2025-03-27 14:50:58 发布

阅读量9.6k

点赞数 24

本文链接：https://blog.csdn.net/qq_42601980/article/details/118787937

版权

本文介绍了在使用Ant Design的a-select组件时，如何实现根据option的内容进行搜索过滤。通过设置`optionFilterProp`属性为`label`，可以使得搜索时匹配option标签内的文字内容，而不是默认的value值。示例代码展示了如何在v-for循环中应用此属性，以实现根据option的`label`属性进行检索，确保搜索结果显示正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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