vue如何实现el-select下拉选项的懒加载

这篇文章主要介绍了vue如何实现el-select下拉选项的懒加载，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

滚动加载的核心逻辑

通过监听容器的滚动事件，滚到最底部时，执行加载数据函数。

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 方式为

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

视图，只需要添加指令.绑定指令需要的属性值.

脚本部分 , 包括初始化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-scroll

element 也提供了用于懒加载数据的指令v-infinite-scroll ，缺陷在于它只监听指令绑定的DOM元素的滚动事件.

infinite-scroll-disabled 是否禁用加载，如果是分页数据，则可以通过计算属性pageSize*pageNum>=total
infinite-scroll-delay 节流加载，默认 200ms
infinite-scroll-distance 触发加载的滚动距离阀值 .
infinite-scroll-immediate 是否立即执行加载函数，需要撑满容器元素;否则手动请求一次数据.

整个数据列表页不需要分页操作时，需要通过页面滚动来加载数据

页面滚动时调用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); } } };