Vue 2中v-select组件过滤功能的个性化定制方法咨询

要实现v-select只显示以输入文本开头的选项，你只需要给组件绑定一个自定义的filter函数，替换默认的包含匹配逻辑，具体操作如下：

1. 自定义过滤函数的逻辑 #

v-select的filter属性接受一个函数，该函数会接收三个参数：

• option: 当前遍历到的选项对象
• label: 该选项对应的显示文本（由组件自动提取，比如你指定了label属性则用对应字段，否则用option本身）
• searchText: 用户输入的搜索内容

我们需要在函数里判断label是否以searchText开头，返回true则保留该选项，false则过滤掉。为了兼容大小写不敏感的场景，建议统一转成小写后再比较。

2. 完整代码示例 #

<template>
  <v-select
    v-model="selected"
    :options="options"
    :filter="startsWithFilter"
    placeholder="输入关键词搜索"
  />
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      options: ['Apple', 'Banana', 'Cherry', 'Apricot', 'Blueberry']
    }
  },
  methods: {
    startsWithFilter(option, label, searchText) {
      // 处理空搜索，返回所有选项
      if (!searchText) return true;
      // 统一转小写，实现大小写不敏感的开头匹配
      const lowerLabel = label.toLowerCase();
      const lowerSearch = searchText.toLowerCase();
      return lowerLabel.startsWith(lowerSearch);
    }
  }
}
</script>

3. 针对复杂选项对象的适配 #

如果你的options是对象数组（比如[{value: 1, text: 'Apple'}, ...]），并且通过label属性指定了显示字段（如:label="text"），函数里的label参数会自动对应到option.text，不需要额外修改过滤函数，直接用上面的逻辑即可。

如果需要严格区分大小写，只需要去掉转小写的步骤：

startsWithFilter(option, label, searchText) {
  if (!searchText) return true;
  return label.startsWith(searchText);
}

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