vue+ant design中select选择框增加模糊查询功能

官网示例

<template>
  <a-select
    show-search
    placeholder="Select a person"
    option-filter-prop="children"
    style="width: 200px"
    :filter-option="filterOption"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
  >
    <a-select-option value="jack">
      Jack
    </a-select-option>
    <a-select-option value="lucy">
      Lucy
    </a-select-option>
    <a-select-option value="tom">
      Tom
    </a-select-option>
  </a-select>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

实际项目实现

<a-select 
	v-model="form.f_metadata" placeholder = "请关联元数据" dropdown-class-name="value-select" 
	show-search :filter-option="filterOption" allow-clear @change="changeMeta">
    <a-select-option v-for="item in meteData" :value="item.f_code" :label="item.f_metadata_name" :key="item._id">
        <span class="select-left">{{ item.f_metadata_name }}</span>
        <span class="select-right">{{ item.f_code }}</span>
    </a-select-option>
</a-select>

// 元数据下拉选框模糊搜索功能
filterOption(input, option) {
    return option.componentOptions.propsData.label.indexOf(input) > -1;
},

下拉选框中的内容如下图所示：

由上图可知：左侧为name值即label，右侧为code值即value。

在代码中新增:label="item.f_metadata_name"，如此就可查询propsData.label的值，若不加这个属性，propsData下只能查询到value值即为f_code的数据，如此就会导致模糊查询出错；加上这个属性，propsData的数据格式如下图所示，如此就可实现想要的功能。

疑惑之处

此时在select中是否增加option-label-prop="label"、option-filter-prop="children"还是labelInValue都没有生效，暂时没找到原因。

错误规避

一开始的实现方法如下：

// 元数据下拉选框模糊搜索功能
filterOption(input, option) {
    option.componentOptions.children[0].context.meteData.forEach((item) => {
        return (item.f_metadata_name.indexOf(input) >= 0);
    })
},

此时无论怎么操作都不能实现，因为一开始没有找到可以直接查询到内容的字段，往下多找了几层，实现过程中使用了数组遍历，导致查询结果有延迟，显示查询失败。

因为这个错误排查了好久，搜了很多经验贴，但都没有详细的解释，下面这个算是比较规范完整的内容：ant-design-vue select 使用汇总