vue2中的el-select组件数据太多,如何实现滚动加载数据效果
作者：艾苧
这篇文章主要介绍了vue2中的el-select组件数据太多,如何实现滚动加载数据效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
项目场景
在我们平常开发中，我们的下拉框数据大部分都是后端一次性返回，然后前端直接塞到页面渲染
我之前也是这么做的，但今天发现数据变得越来越多，已经有五百多条了
所以我就决定着手优化一下，怎么优化呢
比如 分页加载？虚拟列表？
问题描述
当我们使用el-select下拉框选择数据的时候，避免不了数据过多，导致一上来渲染到页面会出现卡顿现象
比如说四五百条数据，一下子塞到下拉框中，页面刚开始渲染的时候
页面许多地方都在渲染数据、重排、重绘，数据少还可以，数据太多会影响性能。
解决方案
el-select给我们提供了 支持远程搜索的功能，这样我们可以一次渲染少许数据，剩下数据可以通过搜索获取。
但有时候 我不知道要搜索的数据名字叫什么，从而导致无法有效搜索，还有就是每次搜索都要请求一次数据，其实官方这个优化已经解决大部分场景问题了。
对于el-select的场景，显然 虚拟列表 不是最优的，因为虚拟列表会把视口外的元素从dom树里移出去，导致我们选择的数据状态无法保存，所以我决定使用分页加载 。
后端刚开始一次性把所有数据返回给我，然后前端分批进行渲染，如果后端一次性请求所有数据太慢，也可以分批加载，具体可以与后端沟通。
代码如下
一开始先拿20条数据，渲染页面，声明一个变量保存所有数据
//html结构
<el-select v-model="hospital" @visible-change="visible" placeholder="请选择医院" filterable collapse-tags multiple @change='changeHospital'>
<el-option :disabled="loading" :label="item.hospital_name" :value="item.hospital_id" v-for="(item,index) in hospitalList" :key="item.hospital_id"></el-option>
</el-select>
//js代码
// 下拉框出现的时候事件
visible(val){
//如果多个下拉框，需要具体给某个标签绑定
let scroll = document.querySelectorAll('.el-scrollbar__wrap')
//显示的时候绑定，隐藏的时候移出绑定事件
if(val){
scroll[1].addEventListener('scroll',this.scrollLoad)
}else{
scroll[1].removeEventListener('scroll',this.scrollLoad)
}
},
// 下拉框滚动分页加载数据
scrollLoad(e){
const { target: { clientHeight,scrollHeight,scrollTop } } = e
const step = 100 //间隔，距离底部100的时候加载数据
const len = this.hospitalList.length //获取当前展示的医院列表长度
if(len >= this.hospital_list.length)return //数据加载完毕
//从总列表里每次 截取一段数据，以便后期追加到页面
// 每次追加20条
const data = this.hospital_list.slice(len,len + 20)
//判断触底加载数据
if(clientHeight + scrollTop >= scrollHeight - step){
this.hospitalList.push(...data)
console.log('触底加载数据');
}
}
如果感觉滚动监听太频繁，可以加个节流处理，我这里没有加
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。