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

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-scroll

element 也提供了用于懒加载数据的指令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() 获取未被回调处理的通知

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读