el-select懒加载和模糊查询

在 Vue 的 Element UI 组件库中，`el-select` 提供了懒加载（Lazy Loading）功能和模糊查询（Filtering）特性，用于优化大量选项的性能和用户体验。

1. **懒加载（Lazy Loading）**：
懒加载适用于选项列表非常庞大，一次性加载所有数据可能导致页面加载过慢的情况。当用户开始滚动下拉框时，`el-select` 只加载可视区域内的数据，其余部分的数据会在需要时动态请求。这通过 `lazy` 或 `load-data` 属性设置为一个函数，该函数接收当前选择项的索引作为参数，并返回一个Promise，当 Promise 解析后，新的数据才会被渲染到下拉菜单中。

<el-select :lazy="true" v-model="selectedValue" @load-data="fetchOptions">
  <el-option v-for="item in loadedOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      loadedOptions: [],
      fetchData(index) {
        // 实现异步获取更多选项的逻辑
        return new Promise((resolve) => setTimeout(() => resolve([...this.loadedOptions, ...moreOptions[index]]), 1000));
      },
    };
  },
};
</script>

2. **模糊查询（Filtering）**：
`el-select` 自带的 `filter-method` 属性允许开发者自定义筛选选项的方式。当你输入搜索关键字时，这个方法会被调用，传入搜索关键词、选项数组以及当前选中的值。你可以在这里处理用户的输入，过滤出匹配的结果。

<el-select filterable v-model="selectedValue" :filter-method="searchFn">
  <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value"></el-option>
</el-select>

<script>
export default {
  methods: {
    searchFn(value, optionList, query) {
      // 这里可以根据query对optionList进行过滤
      return optionList.filter(item => item.label.includes(query));
    },
  },
};
</script>