el-select结合vue-virtual-scroll-list做个多数据下拉列表

要实现一个多数据下拉列表，可以使用`el-select`结合`vue-virtual-scroll-list`来实现。下面是一个简单的示例代码：

<template>
  <div>
    <el-select v-model="selectedValue" placeholder="请选择" @visible-change="handleVisibleChange">
      <vue-virtual-scroll-list :size="30" :remain="10" :bench="3" :items="options" :key-field="'value'" @scroll-to="scrollTo">
        <el-option v-for="option in visibleOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
      </vue-virtual-scroll-list>
    </el-select>
  </div>
</template>

<script>
import Vue from 'vue'
import VueVirtualScrollList from 'vue-virtual-scroll-list'
import { ElSelect, ElOption } from 'element-ui'

Vue.use(VueVirtualScrollList)
Vue.use(ElSelect)

export default {
  components: {
    VueVirtualScrollList,
    ElSelect,
    ElOption
  },
  data() {
    return {
      options: [], // 所有选项
      visibleOptions: [], // 可见选项
      selectedValue: null, // 已选中的值
      lastScrollIndex: 0 // 上次滚动的索引
    }
  },
  mounted() {
    // 模拟获取数据
    this.options = Array.from({ length: 10000 }).map((item, index) => ({
      value: index,
      label: `选项${index}`
    }))
  },
  methods: {
    handleVisibleChange(visible) {
      // 当下拉框展开时，初始化可见选项
      if (visible) {
        this.visibleOptions = this.options.slice(0, 30)
      }
    },
    scrollTo(index) {
      // 根据滚动的位置计算需要展示的可见选项
      const startIndex = index > this.lastScrollIndex ? this.lastScrollIndex + 1 : index
      const endIndex = startIndex + 30
      this.visibleOptions = this.options.slice(startIndex, endIndex)
      this.lastScrollIndex = index
    }
  }
}
</script>

在上面的代码中，我们使用`vue-virtual-scroll-list`组件来实现虚拟滚动，并且在`el-select`中嵌套`vue-virtual-scroll-list`，通过`@visible-change`事件来初始化可见选项，通过`@scroll-to`事件来根据滚动位置计算需要展示的可见选项。最终实现了一个高性能的多数据下拉列表。