el-select数据太多造成页面卡顿?el-select实现触底加载
当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。
思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离底部的距离 > 可滑动高度)把数组变大就行了
1、我这里用的是局部注册
directives: { loadmore: { inserted(el, binding) { const dom = el.querySelector( ".el-select-dropdown .el-select-dropdown__wrap" ); dom.addEventListener("scroll",function(e){ const condition = this.scrollHeight - this.scrollTop <= this.clientHeight; if (condition) { binding.value(); } }); }, }, }
复制
2、使用方法
<el-select v-model="a" placeholder="请选择或搜索" clearable filterable value-key="id" :filter-method="filterMethod" @clear="clearMethod" v-loadmore="loadmore" > <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" > </el-option> </el-select>
export default{
data(){
return {
AllOptions:[],//全部数据
options:[],//取部分数据
a:"",
num:1
}
}
methods:{
/**触底后的方法*/
loadmore(){
//例如下拉框滚动触底后,将全部的数据使用slice切割数组,我这里是每次增加100条
this.num++
this.options= (this.AllOptions|| []).slice(0, this.num * 100)
},
/**这个是搜索方法(你可以忽略) */
filterMethod(query){
if(query){
this.options= this.AllOptions.filter(i=>{
return i.name.includes(query)
})
}else{
this.options= (this.AllOptions|| []).slice(0,this.num * 100)
}
},
clearMethod(){
//我清除后默认前100条
this.options= (this.AllOptions|| []).slice(0,100)
}
}
}
复制
如果你觉得对你有帮助,请点个赞支持一下谢谢!!!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」