vue2项目el-select 怎么设置名称和代号都可以模糊查询

在 Vue2 中，Element UI 的 `el-select` 组件默认支持通过 `filter-method` 属性来进行模糊搜索。你可以自定义这个方法，让它同时根据选项的 `name` 和 `value` 进行匹配。

首先，在你的组件中引入 `el-select` 并设置 `filter-method`：

<template>
  <el-select
    v-model="selectedValue"
    placeholder="请选择"
    filter-method="searchOption"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.name"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        // 这里是你的数据数组，包含 name 和 value 属性
      ],
    };
  },
  methods: {
    searchOption(value, option) {
      // 使用正则表达式模糊匹配 name 和 value
      const regex = new RegExp(value, 'i'); // i 标志表示忽略大小写
      return (
        regex.test(option.label) || // 匹配 label (通常为名称)
        regex.test(option.value) // 或者匹配 value (通常为代号)
      );
    },
  },
};
</script>

在这个例子中，`searchOption` 方法接受两个参数：用户输入的值（用于搜索）和当前选项对象。它会创建一个正则表达式并检查该表达式是否匹配选项的 `label` 或 `value`，如果匹配则返回 `true`，使得该选项出现在搜索结果中。