在实际开发中我们有时无法避免select下拉功能数据过大导致页面卡顿（如在我在一次迭代中有一个select项接口返回了5000多条数据）。用户体验差！结合实际开发给出了3个解决方案：
方案1、select的无限加载；
方案2、select的分段加载；
方案3、select的模糊查询（此方案如有大量数据，对用户体现不友好）
此次介绍第一种方案select的无限加载，首先我们需要考虑到功能以后是否复用，本人考虑到以后可能复用次功能，在main.js自定义全局
directive指令。代码如下：
Vue.directive('loadMore', {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
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()
}
})
}
})
注：scrollHeight 获取元素内容高度(只读)
scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.clientHeight 读取元素的可见高度(只读) 如果元素滚动到底, 下面等式返回true, 没有则返回false
scrollHeight - scrollTop === clientHeight data（）{
return {
activityNames: [], // 请求
activityList: [], 过滤后的数据
formData: { // 分页 一页20条
pageIndex: 1,
pageSize: 20,
}
}
}
HTML:
<el-select
v-model="dataName"
clearable
placeholder="请选择活动名称"
@change="interests_activityName"
filterable
v-loadMore="loadMore"
>
<el-option
v-for="item in activityList"
:key="item.data_code"
:label="item.data_value"
:value="item.data_code"
></el-option>
Js:
// 自定义指令
loadMore() {
this.formData.pageIndex++;
this.activity_sceneNameData(this.formData);
},
//活动名称
activity_sceneNameData() {
let that = this;
that.dataName = "";
that.activityNames = [];
let num = this.formData.pageIndex * this.formData.pageSize;
request.activityNameData().then((res) => {
that.activityNames = res.data
that.activityList = that.activityNames.filter((item, index, arr) => {
return index < num;
});
})
},
下篇：select的分段加载；若有帮助请关注！！！