el-select结合前端模糊查询

el-select 是 Element UI 中的一个下拉选择组件，可以结合前端模糊查询实现动态搜索过滤功能。下面是一个示例代码：

<template>
  <div>
    <el-select v-model="selectedItem" placeholder="请选择" @query-change="handleQueryChange">
      <el-option v-for="option in filteredOptions" :key="option.value" :value="option.value" :label="option.label"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
        // ...
      ],
      selectedItem: '',
      query: ''
    };
  },
  computed: {
    filteredOptions() {
      if (this.query) {
        return this.options.filter(option =>
          option.label.toLowerCase().includes(this.query.toLowerCase())
        );
      }
      return this.options;
    }
  },
  methods: {
    handleQueryChange(query) {
      this.query = query;
    }
  }
};
</script>

在上述示例中，我们使用 `@query-change` 事件监听输入框中的查询变化，并将查询关键词保存在 `query` 变量中。通过计算属性 `filteredOptions`，我们根据 `query` 对选项进行筛选，只显示符合查询条件的选项。

注意，这只是一个简单的示例，实际使用中你可能需要根据具体需求进行修改。同时，你还需要引入 Element UI 库并按照官方文档进行配置。