el-select实现本地搜索数据

el-select 组件可以通过设置 filterable 属性来实现本地搜索数据。

1. HTML 模板:

<template>
  <el-select
    v-model="selectedValue"
    filterable
    placeholder="请选择"
    @filter-method="filterMethod"
  >
    <el-option
      v-for="item in filteredOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

2. JavaScript 代码:

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
        { value: 'option4', label: 'Option 4' },
        { value: 'option5', label: 'Option 5' },
      ],
      filteredOptions: []
    }
  },
  created() {
    this.filteredOptions = this.options;
  },
  methods: {
    filterMethod(query) {
      if (query !== '') {
        this.filteredOptions = this.options.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      } else {
        this.filteredOptions = this.options;
      }
    }
  }
}
</script>

在这个例子中:

1. 我们设置了 filterable 属性来启用过滤功能。

2. 我们使用 @filter-method 来绑定一个自定义的过滤方法 filterMethod。

3. 在 data 中，我们定义了 options 数组来存储所有选项，以及 filteredOptions 数组来存储过滤后的选项。

4. 在 created 钩子中，我们初始化 filteredOptions 为所有选项。

5. 在 filterMethod 方法中，我们根据输入的查询字符串 query 来过滤选项。如果 query 不为空，我们使用 filter 方法来筛选那些标签包含查询字符串的选项（不区分大小写）。如果 query 为空，我们显示所有选项。

6. 在模板中，我们遍历 filteredOptions 而不是 options，这样就可以只显示过滤后的选项。

关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓