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

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

Select V2 虚拟列表选择器

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

在线演示

在线演示

使用说明

安装

npm i el-select-v2 -S
1

全局引入

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

局部引入

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

插槽的使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

示例代码

示例代码

Select Attributes

Select Events

Select Slots

Options

Methods