el-lect下拉加载（实现懒加载）
情况：项⽬出现了下拉数据量过⼤，出现页⾯卡死问题，反馈到我这；
当时实现思路1.使⽤render函数去渲染下拉框
试了发现卡死情况依然存在，所以尝试⽅法2
2.使⽤原⽣js去添加下拉框的<option>
页⾯卡死情况没了，但是变成原⽣lect，数据量⼤很难找到对应的⼈要下拉去找很久；
只能说不完美没达到我预想。
<el-lect
车辆标志大全图片大全v-model="urId"
:filterable='true'
:default-first-option='true'
v-el-lect-loadmore="loadmore"
placeholder="请选择⽤户">
<el-option
v-for="(item,index) in urItems"
:label="item.name"
中国剪纸
:value="item.id"
:key="index"></el-option>
</el-lect>
data(){
return {
urItems: [],//下拉数组
formData: { //下拉参数
pageIndex: 1,
pageSize: 20
},
urs:[] //总数组
}
}
⼀个指令v-el-lect-loadmore：
directives: {
'el-lect-loadmore': {
bind(el, binding) {
yyzz
const SELECTWRAP_DOM = el.querySelector(
'.el-lect-dropdown .el-lect-dropdown__wrap'
怀孕多久可以用试纸测出来
);
SELECTWRAP_DOM.addEventListener('scroll', function() {
const condition =
this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) {
binding.value();
}
黄山奇石资料});
}
}
},
⼀个⽅法：loadmore
// 下拉加载
loadmore() {
this.formData.pageIndex++;
},
getUrs(v) {by2的歌
let num = ~~this.formData.pageIndex * ~~this.formData.pageSize;
this.urItems = this.urs.filter((item, index, arr) => {
监理职责
return index < num;
});
},
如此实现刚进页⾯显⽰前20条数据，往下滚动显⽰更多数据，就实现了懒加载。
空气图片还有⼏个待优化点：1下拉搜索是已加载的数据中找，⽽不是全部数据。2已选中未加载数据怎么办；别的不多说我去优化了。可能有后续，发现⾃⼰变懒了博客变少了。
