ElementUI2.0下拉框组件实现虚拟列表，自定义指令虚拟下拉列表

由于业务对页面性能要求很高，如果下拉框数据很大，如果一个页面有多个下拉框，那么就导致页面很卡顿。由于elementPlus已经支持了下拉组件虚拟列表，但是所在项目仍然使用elementUI2.0，所以需要自己扩展支持下拉组件虚拟列表，以下是笔者总结的一篇关于elementUI2.0支持下拉框虚拟列表的实践方案，希望看完在项目中有所帮助。

正文开始…

在开始本文之前，笔者主要会从以下方向上去实现该业务需求

1、尝试在原有elementUI组件上，写一个自定义指令，支持下拉虚拟列表

2、尝试使用社区成熟的虚拟列表插件方案实现虚拟列表

前置

我们知道虚拟列表本质上就是在可视区域内显示对应的数据，由于数据是按需加载，所以我们首先就要明白如何实现虚拟列表，具体可以参考以前写的一篇文章了解虚拟列表背后原理，轻松实现虚拟列表

快速实现页面

我们是使用vue-cli2快速搭建了一个基本项目

我们看下实际代码

 
 
1
2

对应数据就是在created中直接生成了一组100条数据

export default {name: 'hello-word',data() {return {sourceData: []}},created () {var arr = new Array(100).fill(1);arr.forEach((v, index) => {this.sourceData.push({value: index,label: `test_${index}`});});}
} 
1
2

我们先看下左侧虚拟列表

下拉框并不是一次性渲染所有数据，而是按需获取可视区域的数据，这是如何实现的？

虚拟列表指令

主要思路就是控制下拉数据显示条数，本质就是要控制optionsData

 
 
1
2

我们看到v-select指令上主要有data,selectAttrs