antdv a-select 可对选项进行搜索filter

ToOTOooo

于 2024-03-29 10:28:23 发布

阅读量714

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/qq_44792224/article/details/137137075

本文介绍了如何在AntDesign的a-select组件中使用v-model和show-search属性创建下拉选择框，并展示了两种filter-option方法，一种是基于标签文本的模糊匹配，另一种是基于选项值的全匹配，但后者可能会导致问题。

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

https://www.antdv.com/components/select-cn#api

<a-select
    v-model:value="value"
    show-search
    placeholder="Select a person"
    style="width: 200px"
    :options="options"
    :filter-option="filterOption"
  ></a-select>

const filterOption =  (input, option) => {
  return (option?.label ?? "").includes(input);
};
// 下面这个不行???
// const filterOption =  (input, option) => {
//   return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
// };