vue如何实现el-select下拉选项的懒加载
滚动加载的核心逻辑
在vue中处理数据懒加载
在vue组件中使用指令 v-lazy-load
Element 指令v-infinite-scroll
下拉选择是常用的用户交互选择的操作；常用固定选择项或者动态渲染选择项。
实际项目中存在数据量大，一次性渲染很多数据会造成下拉卡顿的问题，通过滚动懒加载，逐步增加下拉选项。
滚动加载的核心逻辑通过监听容器的滚动事件，滚到最底部时，执行加载数据函数。
interface IScrollOption {
distance: number; // 触发loadData事件的滚轴距底部的距离
loadData: () => void; // 数据加载函数
}
/**
* 处理容器滚动事件 ; 滚动到底部时,执行处理函数
* @param dom
* @param option
*/
function handleScroll(dom: Element, option: IScrollOption) {
//
const scrollBottom = dom.scrollTop + dom.clientHeight;
if (dom.scrollHeight - scrollBottom <= option.distance) {
// 数据加载
option.loadData();
}
}
在vue中处理数据懒加载
使用Element作为UI组件，常用下拉select 方式为
<el-select v-model="selectData">
<el-option v-for="item in data" :key="item.id" value="item.id" :label="item.name"></el-option>
</el-select>
data 为渲染数据，存在大批量数据时，防止下拉卡顿，采用懒加载的方式逐步增加数据
由于el-select 组件并没有提供内部数据滚动的事件或者自定义内部滚动容器DOM元素 . 只能通过F12 查看页面结构获知滚动的容器DOM选择器 .
可以通过自定义指令的方式，提取共用逻辑，不局限于select，也可用于其他列表懒加载渲染的UI组件.
/**
* 定义懒加载数据列表的指令
* 可通过滚动懒加载来减少一次性渲染大量数据的性能卡顿
*/
import Vue from "vue";
import { throttle } from "lodash";
export interface ILazyProps {
loadData: () => void; // 数据加载函数
distance: number; // 触发函数调用的滚动距离
scrollBody?: string; // 置顶滚动容器 , 不指定则为指令绑定元素
callback: (fn: () => void) => void; // 自定义回调逻辑,可用于适时销毁监听事件
}
Vue.directive("lazy-load", {
/**
* el - 指令所绑定的元素DOM
* binding - 传入指令的其他附带参数
* name - 指令名
* value - 指令绑定的值
* oldValue - 绑定的前一个值
* expression - 指令绑定的字符串形式的表达式
* arg - 传给指令的参数
* modifiers - 指令修饰符的对象
* vnode
* oldVnode
*/
inserted: (el, binding) => {
// 获取scroll 滚动的容器元素,由参数传入
// 如果没有传入,则默认绑定指令的元素自己
// 获取懒加载处理函数 , 以及其他参数
const { loadData, distance, scrollBody, callback } =
binding.value as ILazyProps;
let scrollContainer = el;
if (scrollBody) {
scrollContainer = el.querySelector(scrollBody) || el;
}
// 滚动事件监听
const scroll = throttle(
handleScroll.bind(null, scrollContainer, { distance, loadData }),
500
);
scrollContainer.addEventListener("scroll", scroll);
// 回调时 返回事件销毁函数
callback(() => {
scrollContainer.removeEventListener("scroll", scroll);
});
},
});
在vue组件中使用指令 v-lazy-load
视图，只需要添加指令.绑定指令需要的属性值.
<el-select v-model="selectData" v-lazy-load="lazyOption">
<el-option v-for="item in data" :key="item.id" value="item.id" :label="item.name"></el-option>
</el-select>
脚本部分 , 包括初始化layzOption 定义数据加载函数
import { ILazyProps } from "@/directives/lazyLoad";
export default class extends Vue {
lazyOption: ILazyProps = {
loadData: this.loadData,
distance: 20,
scrollBody: ".el-scrollbar__wrap", // 为el-select 滚动容器的DOM元素的class选择器
callback: (fn: () => void) => {
// 这里是在组件销毁前, 移除监听事件.
this.$once("hook:beforeDestroy", () => fn());
},
};
loadData(): void {
this.data = this.data.concat(
new Array(5).fill({
id: "1009",
name: "双十一",
})
);
}
}
Element-plus 正在新增的一个组件 el-select-v2 虚拟化列表下拉选择器 . 虚拟列表与懒加载不同的是，虚拟列表渲染的DOM节点固定，通过滚动的位置计算需要展示的数据.
Element 指令v-infinite-scrollelement 也提供了用于懒加载数据的指令v-infinite-scroll ， 缺陷在于它只监听指令绑定的DOM元素的滚动事件.
infinite-scroll-disabled 是否禁用加载，如果是分页数据 ， 则可以通过计算属性pageSize*pageNum>=total
infinite-scroll-delay 节流加载，默认 200ms
infinite-scroll-distance 触发加载的滚动距离阀值 .
infinite-scroll-immediate 是否立即执行加载函数，需要撑满容器元素;否则手动请求一次数据.
整个数据列表页不需要分页操作时， 需要通过页面滚动来加载数据
<div v-infinite-scroll="loadData" infinite-scroll-disabled="disabled" infinite-scroll-delay="delay">
<table
:showPagination="false"
:tableOption="tableOption"
:tableColumns="tableColumns"
></table>
</div>
页面滚动时调用loadData函数,定义请求加载数据的逻辑.
直接贴源码
export default {
name: 'InfiniteScroll',
inserted(el, binding, vnode) {
// 绑定的回调函数
const cb = binding.value;
// 当前组件实例引用
const vm = vnode.context;
// only include vertical scroll
// 滚动容器DOM元素
const container = getScrollContainer(el, true);
// 获取指令需要的参数 delay distance immediate disabled
const { delay, immediate } = getScrollOptions(el, vm);
// 滚动事件处理函数,节流
const onScroll = throttle(delay, handleScroll.bind(el, cb));
// 将额外的计算属性绑定到el上,在unbind 可用于移除监听函数
el[scope] = { el, vm, container, onScroll };
if (container) {
container.addEventListener('scroll', onScroll);
if (immediate) {
// 容器内元素发生节点变更时触发执行
// MutationObserver API 功能调用
const observer = el[scope].observer = new MutationObserver(onScroll);
observer.observe(container, { childList: true, subtree: true });
// 初始调用一次滚动加载函数
onScroll();
}
}
},
unbind(el) {
// 移除滚动事件
const { container, onScroll } = el[scope];
if (container) {
container.removeEventListener('scroll', onScroll);
}
}
};
MutationObserver 监视对DOM树更改的能力
实例构造函数接收一个回调函数，为DOM发生变化时需要执行的回调
observe(target,[option]) 配置需要监听的DOM元素，以及DOM变更的配置项
disconnect() 停止接收DOM变化的通知
takeRecords() 获取未被回调处理的通知
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
