vue 实现 el-select 下拉选项的懒加载_element-ui image 图片放到了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();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在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>
1
2
3

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);
    });
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在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>
1
2
3

脚本部分 , 包括初始化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: "双十一",
      })
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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>
1
2
3
4
5
6
7

页面滚动时调用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);
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

MutationObserver 监视对DOM树更改的能力 .

实例构造函数接收一个回调函数,为DOM发生变化时需要执行的回调.

• observe(target,[option]) 配置需要监听的DOM元素,以及DOM变更的配置项
• disconnect() 停止接收DOM变化的通知.
• takeRecords() 获取未被回调处理的通知;