解决Ant Design Vue的Select搜索指定字段的问题

teaxia
2022-02-10 / 0 评论 / 942 阅读 / 正在检测是否收录...

官方的select组件,在设置了show-search后可开启搜索模式。但是我们在跟后端接口进行对接的时候,获取到的数据结构往往跟官方的的数据结构又不一致,而且搜索默认仅能搜索value的值。那么怎么解决这个问题呢?
我们可以通过optionFilterProp来设置搜索的值

<a-select
  ref="select"
  v-model:value="value1"
  show-search
  optionFilterProp="label"
>
  <template v-for="(v,index) in options" :key="index">
    <SelectOption :label="v.roleName" :value="v.roleId">{{v.roleName}}</SelectOption>
  </template>
</Select>

我们只需要把搜索的值内容改为optionFilterProp=label,然后再通过SelectOption选项把我们需要指定搜索的字段加上去即可。
如果想同时搜索label和value两个字段的值怎么办呢?
我们只需要把label设置成label="v.roleName+v.roleId"这样即可。

12

评论 (0)

取消