基于 Element UI 适用于 Vue 2 版本的虚拟列表选择器组件el-select

背景：在某些使用情况下，单个选择器可能最终加载数万行数据。 将这么多的数据渲染至 DOM 中可能会给浏览器带来负担，从而造成性能问题。 ——vue3+element-plus有现成的轮子。而vue2+element-ui没有。
以下 文章大部分 摘自 源组件中的README.md

Select V2 虚拟列表选择器

基于 Element UI适用于 Vue 2 版本的虚拟列表选择器组件。

在线演示

在线演示

使用说明

安装

npm i el-select-v2 -S

全局引入

  //全局引入
  import ElSelectV2 from 'el-select-v2';
  Vue.use(ElSelectV2);

局部引入

<template>
  <el-select-v2 v-model="value" :options="options" />
</template>

<script>
  //局部引入
  import ElSelectV2 from 'el-select-v2'
  export default {
     
    components: {
     
      ElSelectV2 
    },
    data() {
     
      return {
     
        options: [],
        value: '',
      };
    },
    created() {
     
      for (let i = 0; i < 10000; i++) {
     
        this.options.push({
     
          value: `value ${ i + 1}`,
          label: `label ${ i + 1}`,
        });
      }
    },
  };
</script>

插槽的使用

<template>
   <el-select-v2
                    v-model="student"
                    placeholder="请选择学生"
                    filterable
                    :options="dataList"
                    value-key="studentId"
                    label-key="studentName"
                  >
                    <template #default="{ item }">
                      <span>{
  { item.studentName }}哈哈哈</span>
                    </template>
                  </el-select-v2>
</template>

<script>
  //局部引入
  import ElSelectV2 from 'el-select-v2'
  export default {
     
    components: {
     
      ElSelectV2 
    },
    data() {
     
      return {
     
        dataList: [],
        student: '',
      };
    },
    created() {
     
      for (let i = 0; i < 10000; i++) {
     
        this.dataList.push({
     
          studentId: `value ${ i + 1}`,
          studentName: `label ${ i + 1}`,
        });
      }
    },
  };
</script>

示例代码

示例代码

Select Attributes

Select Events

Select Slots

Options

Methods