Vue Select如何实现对选项meta元数据的搜索匹配功能

完全可以实现，vue-select支持通过自定义filter-by属性覆盖默认的搜索匹配逻辑，具体操作如下：

步骤1：给v-select组件添加自定义过滤属性 #

修改组件代码，新增:filter-by="customFilter"配置：

<v-select 
  :options="options" 
  label="country" 
  :reduce="country => country.meta.code" 
  v-on:input="set"
  :filter-by="customFilter"
/>

步骤2：实现自定义过滤方法 #

在Vue实例的methods中添加customFilter方法，逻辑覆盖你需要匹配的所有字段：

methods: {
  customFilter(option, label, searchQuery) {
    // 搜索关键词转小写，实现不区分大小写匹配
    const query = searchQuery.toLowerCase().trim()
    // 空搜索直接返回所有选项
    if (!query) return true

    // 匹配1：label对应的国家名称
    if (option.country.toLowerCase().includes(query)) return true
    // 匹配2：meta下的code字段
    if (option.meta.code.toLowerCase().includes(query)) return true
    // 匹配3：meta下的tags数组
    if (option.meta.tags.some(tag => tag.toLowerCase().includes(query))) return true
    // 匹配4：如需匹配provinces字段可保留以下规则，不需要可以删除
    if (option.meta.provinces.some(prov => prov.toLowerCase().includes(query))) return true

    // 所有匹配规则都不满足则过滤掉该选项
    return false
  }
}

效果验证 #

配置完成后输入sky，会命中加拿大选项的meta.tags字段，正常检索出对应选项。你可以根据自己的业务需求调整customFilter内的匹配规则，扩展更多需要搜索的字段即可。

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