el-select 分页加载

el-select 分页懒加载

针对数据量大的选择器，需要分页从后端接口获取数据，前端监听选择器下拉框的滚动事件，当往下滚动至底部一定位置时，调接口

监听的指令——loadMore

import Vue from 'vue'
Vue.directive('loadMore', {bind(el, binding) {let value = ''el.addEventListener('input', function() {value = el.querySelector('.el-select__input').value})// 获取滚动页面DOMconst SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')let scrollPosition = 0SCROLL_DOM.addEventListener('scroll', function() {// 当前的滚动位置 减去  上一次的滚动位置// 如果为true则代表向上滚动，false代表向下滚动const flag= this.scrollTop - scrollPosition > 0// 记录当前的滚动位置scrollPosition = this.scrollTop// 记录滚动位置距离底部的位置,在滚动位置距离滚动页面底部一定高度时在触发，例如距页面底部只有100px时触发loadMore事件const LIMIT_HEIGHT= 10const scrollBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) < LIMIT_HEIGHTconst { loadMore } = binding.value;// 如果已达到指定位置则触发// 如果向下滚动 并且距离底部只有10pxif (flag && scrollBottom) {// 将滚动行为告诉组件loadMore(flagToDirection, value)}// 如果是向上滚动  并且距离顶部只有100px//if (!flag&& this.scrollTop < LIMIT_HEIGHT) {//  loadMore(flagToDirection, value)//}})}
})

指令的使用

<el-selectv-model="value"v-load-more="{ loadMore }":remote-method="val => searchList(val)":loading="loading"remotefilterablemultipleplaceholder="请选择"@visible-change="pageIndex = 1"><el-option v-for="item in list" :key="item" :label="item.label" :value="item.value"></el-option></el-select>searchList(value,pageIndex = 1, pageSize = 10) {//更新下拉数据时，重置分页参数this.pageIndex = 1;//将分页参数传至接口setTimeout(()=>{this.list = [];})
}
loadMore(flag, value) {flag && this.searchList(value, ++this.pageIndex);
}

没有做成虚拟滚动的原因其实就是没有必要弄那么复杂，懒加载的方式对于用户来说更友好，同时减轻开发成本