el-select 加载一万条数据

要在 el-select 中加载一万条数据，你可以使用 el-options 组件，并将数据源绑定到数据数组上。然后，你可以设置一个虚拟滚动属性，以便在下拉列表中仅渲染可见的条目。这将提高性能并减少渲染时间。

以下是一个示例代码：

<template>
  <el-select v-model="selectedOption" filterable clearable>
    <el-option
      v-for="option in filteredOptions"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [], // 数据源数组
      selectedOption: null, // 当前选中的选项
      filterText: '' // 过滤文本
    };
  },
  computed: {
    filteredOptions() {
      // 根据过滤文本对数据进行筛选
      return this.options.filter(option =>
        option.label.toLowerCase().includes(this.filterText.toLowerCase())
      );
    }
  },
  created() {
    // 模拟加载一万条数据
    for (let i = 1; i <= 10000; i++) {
      this.options.push({
        label: `Option ${i}`,
        value: i
      });
    }
  }
};
</script>

在上面的代码中，我们使用 el-option 组件循环渲染 filteredOptions 数组中的选项。filteredOptions 是根据过滤文本进行筛选的结果。可以使用 filterable 属性启用输入框进行过滤。通过 v-model 绑定 selectedOption 变量，以便获取当前选中的选项的值。

这样，即使拥有一万条数据，el-select 在输入框中只会渲染可见的选项，从而提高性能和用户体验。