官网示例

<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 使用汇总

Logo

前往低代码交流专区

更多推荐