elementui+vue通过下拉框多选字段进行搜索模糊匹配

在使用Element UI和Vue进行开发时，可以通过结合el-select组件的多选功能和el-option组件进行下拉框的创建。为了实现模糊匹配搜索，可以使用filterable属性来启用搜索功能。

以下是一个简单的例子，展示了如何使用Element UI和Vue实现下拉框多选字段的模糊匹配搜索：

<template>
  <el-select
    v-model="selectedOptions"
    multiple
    filterable
    remote
    placeholder="请选择"
    :remote-method="searchOptions"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [],
      loading: false
    };
  },
  methods: {
    searchOptions(query) {
      if (query !== '') {
        this.loading = true;
        // 模拟远程搜索
        setTimeout(() => {
          this.loading = false;
          this.options = this.options.filter(item => {
            // 这里可以根据需要自定义匹配规则
            return item.label.toLowerCase().includes(query.toLowerCase());
          });
        }, 200);
      } else {
        this.options = [];
      }
    }
  }
};
</script>

在这个例子中，el-select组件的multiple属性允许用户选择多个选项，filterable属性启用了搜索功能，remote-method属性用于指定一个方法，当输入值变化时会调用该方法。loading数据属性用于在搜索时显示加载状态。

searchOptions方法会在输入值变化时被调用，它通过设置loading为true来显示加载状态，然后模拟一个异步的搜索过程（通过setTimeout），搜索结果是通过筛选原有options数组得到的，并且通过includes方法实现了对选项标签的模糊匹配。