如何自定义el-select-v2组件的filterable过滤功能

问题原因 #

el-select-v2的filter-method和旧版el-select的逻辑存在差异，按照旧版组件写法给方法传入全量选项、返回过滤后列表的用法，不符合v2版本的API约定，所以配置不生效。

v2版本中filter-method的约定规则：

• 组件会自动遍历所有传入的options，逐个调用你绑定的过滤方法
• 方法接收2个参数：第一个是用户输入的搜索关键词query，第二个是当前遍历到的单个选项对象
• 方法需要返回Boolean类型值：返回true代表该选项匹配搜索规则、需要展示，返回false代表该选项不匹配、需要过滤隐藏

正确实现代码 #

模板部分 #

<el-select-v2
  v-model="form.project"
  filterable
  :options="projects"
  placeholder="Select a project"
  style="width: 100%"
  clearable
  :filter-method="handleFilter"
>
</el-select-v2>

逻辑部分 #

const projects = computed(() => store.getters['project/projectOptions']);

// 自定义过滤逻辑
const handleFilter = (query, option) => {
  // 无搜索关键词时展示全部选项
  if (!query) return true;
  // 示例：按选项label做不区分大小写的模糊匹配，可根据自身需求替换判断逻辑
  return `${option.label}`.toLowerCase().includes(query.toLowerCase());
};

注意事项 #

• 不要在filter-method内部自行遍历全量选项返回新数组，组件内部会自动完成遍历筛选流程，错误的返回值会导致过滤逻辑完全失效
• 如果你的选项字段不是默认的label/value结构，需要提前给组件配置props属性映射对应字段，避免过滤时取值错误

内容的提问来源于stack exchange，提问作者vladzur