当我们使用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)
}
}
}
如果你觉得对你有帮助，请点个赞支持一下谢谢！！！
标签：el,num,select,AllOptions,100,options,卡顿 From： https://www.cnblogs.com/jzm2842688813/p/17374087.html