情况：项目出现了下拉数据量过大，出现页面卡死问题，反馈到我这；
当时实现思路1.使用render函数去渲染下拉框
试了发现卡死情况依然存在，所以尝试方法2
2.使用原生js去添加下拉框的<option>
页面卡死情况没了，但是变成原生select，数据量大 很难找到对应的人 要下拉去找很久；
只能说不完美 没达到我预想。
百度了 发现一篇地址：https://segmentfault.com/a/1190000017812498?utm_source=tag-newest 下拉懒加载的操作，我就借鉴了
实现代码：
<el-select
v-model="userId"
:filterable='true'
:default-first-option='true'
v-el-select-loadmore="loadmore"
placeholder="请选择用户">
<el-option
v-for="(item,index) in userItems"
:label="item.name"
:label="item.name"
:value="item.id"
:key="index"></el-option>
</el-select>
data(){
return {
userItems: [],//下拉数组
formData: { //下拉参数
pageIndex: 1,
pageSize: 20
},
users:[] //总数组
users:[] //总数组
}
}
一个指令v-el-select-loadmore：
directives: {
'el-select-loadmore': {
bind(el, binding) {
const SELECTWRAP_DOM = el.querySelector(
'.el-select-dropdown .el-select-dropdown__wrap'
);
SELECTWRAP_DOM.addEventListener('scroll', function() {
const condition =
this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) {
binding.value();
}
});
}
}
},
一个方法：loadmore
// 下拉加载
loadmore() {
this.formData.pageIndex++;
this.getUsers(this.formData);
},
getUsers(v) {
let num = ~~this.formData.pageIndex * ~~this.formData.pageSize;
this.userItems = this.users.filter((item, index, arr) => {
return index < num;
});
},
如此实现刚进页面显示前20条数据，往下滚动显示更多数据，就实现了懒加载。
还有几个待优化点：1下拉搜索是已加载的数据中找，而不是全部数据。2已选中未加载数据怎么办;
别的不多说 我去优化了。可能有后续，发现自己变懒了 博客变少了。