vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题_vue-virtual-scroller el-select

问题

当我们使用el-select选择器下拉数据很大的时候，会出现页面卡顿，甚至卡死的情况，用户体验很不好。我目前采取的方案是使用虚拟列表的方式去处理这个问题。

实现效果

数据获取完毕：

点击输入框：我们可以看到 2 万条数据只展示了 30 条。

我们滚动找到 kaimo-666，选择它

我们再次点击输入框，我们以及定位到了 kaimo-666 这个位置

另外拓展了点击项目跟输入框数据改变的事件

源码地址

我基于 vue-virtual-scroll-list 跟 element-ui 实现了下拉虚拟列表，解决下拉选择框数据量大时卡顿问题。

代码地址：https://github.com/kaimo313/select-virtual-list

什么是虚拟列表

虚拟列表是按需显示的一种技术，可以根据用户的滚动，不必渲染所有列表项，而只是渲染可视区域内的一部分列表元素的技术。

虚拟列表原理：

如图所示，当列表中有成千上万个列表项的时候，我们如果采用虚拟列表来优化。就需要只渲染可视区域（ viewport ）内的 item8 到 item15 这8个列表项。由于列表中一直都只是渲染8个列表元素，这也就保证了列表的性能。

代码实现

这里我们使用 vue-virtual-scroll-list 轮子，一个 vue 组件支持大量数据列表，具有高滚动性能。

1、安装 vue-virtual-scroll-list 跟 element-ui

npm i element-ui vue-virtual-scroll-list --save
1

里面的一些参数可以参考文档：https://github.com/tangbc/vue-virtual-scroll-list/blob/master/README.md

Required props：

Commonly used：

Public methods：You can call these methods via ref：

比如：定位到选择的项目时，我就使用了下面两个方法。

另外事件的发射参考了：https://tangbc.github.io/vue-virtual-scroll-list/#/keep-state

2、编写 select-virtual-list 组件

这里我们使用 el-popover 跟 el-input 加上 vue-virtual-scroll-list 去实现自定义虚拟选择器组件 select-virtual-list。

新建文件 src\components\SelectVirtualList\index.vue

<template>
    <el-popover
        v-model="visibleVirtualList"
        popper-class="select-virtual-list-popover"
        trigger="click"
        placement="bottom-start"
        :width="width">
        <virtual-list v-if="visibleVirtualList"
            ref="virtualListRef"
            class="virtual-list"
            :data-key="'id'"
            :keeps="keeps"
            :data-sources="dataList"
            :data-component="itemComponent"
            :extra-props="{ curId }"
            :estimate-size="estimateSize"
            :item-class="'list-item-custom-class'"
        ></virtual-list>
        <el-input slot="reference" 
            v-model="curValue"
            :style="`width:${width}px;`"
            :size="size"
            :placeholder="placeholder"
            @input="handleInput"
        ></el-input>
    </el-popover>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list';
import VirtualItem from './VirtualItem.vue';
export default {
    name: 'SelectVirtualList',
    props: {
        width: {
            type: Number,
            default: 250
        },
        size: {
            type: String,
            default: "small"
        },
        placeholder: {
            type: String,
            default: "请选择"
        },
        dataList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        // 虚拟列表在真实 dom 中保持渲染的项目数量
        keeps: {
            type: Number,
            default: 30
        },
        // 每个项目的估计大小，如果更接近平均大小，则滚动条长度看起来更准确。 建议分配自己计算的平均值。
        estimateSize: {
            type: Number,
            default: 32
        },
        // input输入触发方法
        virtualInputCall: Function,
        // 点击每个项目触发方法
        virtualClickItemCall: Function
    },
    components: {
        VirtualList
    },
    watch: {
        visibleVirtualList(n) {
            if(n) {
                // 当展示虚拟列表时，需要定位到选择的位置
                this.$nextTick(() => {
                    let temp = this.curIndex ? this.curIndex : 0;
                    // 方法一：手动设置滚动位置到指定索引。
                    this.$refs.virtualListRef.scrollToIndex(temp - 1);
                    // 方法二：手动将滚动位置设置为指定的偏移量。
                    // this.$refs.virtualListRef.scrollToOffset(this.estimateSize * (temp - 1));
                })
            }
        }
    },
    data () {
        return {
            curId: "", // 当前选择的 id
            curValue: "", // 当前选择的值
            curIndex: null, // 当前选择的索引
            visibleVirtualList: false, // 是否显示虚拟列表
            itemComponent: VirtualItem, // 由 vue 创建/声明的渲染项组件，它将使用 data-sources 中的数据对象作为渲染道具并命名为：source。
        };
    },
    created() {
        // 监听点击子组件
        this.$on('clickVirtualItem', (item) => {
            this.curId = item.id;
            this.curValue = item.name;
            this.curIndex = item.index;
            this.visibleVirtualList = false;
            console.log("item--->", item)
            this.virtualClickItemCall && this.virtualClickItemCall(item);
        })
    },
    methods: {
        // 输入框改变
        handleInput(val) {
            console.log("val--->", val);
            if(!val) {
                this.curId = "";
                this.curIndex = null;
            }
            this.virtualInputCall && this.virtualInputCall(val);
        }
    }
};
</script>

<style lang='scss'>
.el-popover.el-popper.select-virtual-list-popover {
    height: 300px;
    padding: 0;
    border: 1px solid #E4E7ED;
    border-radius: 4px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    .virtual-list {
        width: 100%;
        height: calc(100% - 20px);
        padding: 10px 0;
        overflow-y: auto;
    }
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fff;
}
::-webkit-scrollbar-thumb {
    background-color: #aaa !important;
    border-radius: 10px !important;
}
::-webkit-scrollbar-track {
    background-color: transparent !important;
    border-radius: 10px !important;
    -webkit-box-shadow: none !important;
}
</style>
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

新建子组件文件 src\components\SelectVirtualList\VirtualItem.vue

<template>
    <div :class="['virtual-item', {'is-selected': curId === source.id}]" @click="handleClick">
        <span>{{source.name}}</span>
    </div>
</template>

<script>

export default {
    name: 'VirtualItem',
    props: {
        curId: {
            type: String,
            default: ""
        },
        source: {
            type: Object,
            default () {
                return {}
            }
        },
    },
    methods: {
        dispatch(componentName, eventName, ...rest) {
            let parent = this.$parent || this.$root;
            let name = parent.$options.name;
            while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;
                if (parent) {
                    name = parent.$options.name;
                }
            }
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(rest));
            }
        },
        handleClick() {
            // 通知 SelectVirtualList 组件，点击了项目
            this.dispatch('SelectVirtualList', 'clickVirtualItem', this.source);
        }
    }
}
</script>

<style lang="scss" scoped>
.virtual-item {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
        background-color: #eee;
    }
    &.is-selected {
        color: #409EFF;
        background-color: #dbeeff;
    }
}
</style>
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

3、编写测试 demo

新建文件：src\views\demo.vue

<template>
    <select-virtual-list 
        :width="250"
        size="small"
        placeholder="请选择"
        :dataList="dataList"
        :keeps="30"
        :estimateSize="32"
        :virtualInputCall="virtualInputCall"
        :virtualClickItemCall="virtualClickItemCall"
    ></select-virtual-list>
</template>

<script>
import SelectVirtualList from '../components/SelectVirtualList/index.vue';
// 获取模拟数据
import { getList } from '../utils/list.js';

export default {
    data () {
        return {
            dataList: [],
        }
    },
    components: {
        SelectVirtualList
    },
    created() {
        // 2 秒返回 2 万条数据
        console.log("dataList--->开始获取数据");
        getList(20000, 2000).then(res => {
            this.dataList = res;
            console.log("dataList--->数据获取完毕", res);
        })
    },
    methods: {
        // 输入回调
        virtualInputCall(val) {
            console.log("virtualInputCall---->", val);
            // ...
        },
        // 点击项目回调
        virtualClickItemCall(item) {
            console.log("virtualClickItemCall---->", item);
            // ...
        }
    }
}
</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
39
40
41
42
43
44
45
46
47
48
49

添加模拟接口方法：src\utils\list.js

/**
 * @description 获取模拟数据
 *      @param {Number} num 需要获取数据的数量
 *      @param {Number} time 需要延迟的毫秒数
*/
export function getList(num = 10000, time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const tempArr = []
            let count = num;
            while (count--) {
                const index = num - count;
                tempArr.push({
                    id: `${index}$${Math.random().toString(16).substr(9)}`,
                    index,
                    name: `kaimo-${index}`,
                    value: index
                })
            }
            resolve(tempArr);
        }, time);
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

参考资料

• 【高级】列表优化之虚拟列表
• vue-virtual-scroll-list
• vue-virtual-scroll-list：例子