情况:项目出现了下拉数据量过大,一次加载数据量过大的时候,出现页面卡死问题
这时我们希望做到分页加载,即懒加载的情况,可以先在下拉框中加载20条,当滚动条滚动到底部的时候,我后再请求出具再加载20条这样子
实现方法:首先要自定义一个指令,这样来获取元素的滚动条是否触底,触底之后就请求数据,然后把新请求的第二页的数据拼接到原来的数据上
自定义触底指令
Vue.directive('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();
}
});
}
})
使用自定义指令方法
<el-select v-model="value" placeholder="请选择" v-loadmore='request'>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>