网站促销广告,免费适合个人主页,新网官方网站,自动采集更新的网站wordpressel-select 分页加载 el-select 分页懒加载监听的指令——loadMore指令的使用 el-select 分页懒加载
针对数据量大的选择器#xff0c;需要分页从后端接口获取数据#xff0c;前端监听选择器下拉框的滚动事件#xff0c;当往下滚动至底部一定位置时#xff0c;调接口
监听… el-select 分页加载 el-select 分页懒加载监听的指令——loadMore指令的使用 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-modelvaluev-load-more{ loadMore }:remote-methodval searchList(val):loadingloadingremotefilterablemultipleplaceholder请选择visible-changepageIndex 1el-option v-foritem in list :keyitem :labelitem.label :valueitem.value/el-option/el-selectsearchList(value,pageIndex 1, pageSize 10) {//更新下拉数据时重置分页参数this.pageIndex 1;//将分页参数传至接口setTimeout((){this.list [];})
}
loadMore(flag, value) {flag this.searchList(value, this.pageIndex);
}没有做成虚拟滚动的原因其实就是没有必要弄那么复杂懒加载的方式对于用户来说更友好同时减轻开发成本
