如何为vue-search-select添加不受筛选的静态选项？

我之前遇到过一模一样的情况，这个库的文档确实滞后，filter-predicate实际上是支持传入自定义函数的，刚好能用来实现你的需求。具体做法如下：

• 给静态选项加个标识（或者直接用固定的label/value判断），方便在过滤函数里识别它
• 自定义过滤函数，让静态选项跳过筛选逻辑，始终保留在列表中，其他选项正常参与过滤

具体代码示例 #

1. 定义包含静态选项的列表：

data() {
  return {
    options: [
      { value: 'static_opt', label: '我的静态选项', isStatic: true },
      { value: 'opt1', label: '普通选项1' },
      { value: 'opt2', label: '普通选项2' }
    ]
  }
}

2. 编写自定义过滤函数：

methods: {
  customFilter(searchText, item) {
    // 静态选项直接返回true，不被过滤
    if (item.isStatic) {
      return true;
    }
    // 普通选项按label匹配搜索词（可根据需求调整逻辑）
    return item.label.toLowerCase().includes(searchText.toLowerCase());
  }
}

3. 在组件中配置filter-predicate：

<search-select
  :options="options"
  :filter-predicate="customFilter"
></search-select>

如果不想给选项加isStatic标识，也可以直接通过固定的label或value判断：

customFilter(searchText, item) {
  if (item.label === '我的静态选项') {
    return true;
  }
  return item.label.toLowerCase().includes(searchText.toLowerCase());
}

亲测这个方法有效，不少用这个库的开发者都这么处理静态选项需求，文档和实际不符的问题应该是维护者没及时更新文档导致的。

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