vue3 通过自定义指令在table中滚动加载数据

原创

已于 2023-06-26 15:44:01 修改 · 987 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #elementPlus

于 2023-06-25 14:37:19 首次发布

本文介绍如何在Vue3项目中利用自定义指令实现ElementPlus表格的滚动加载功能。首先，在utils文件夹下创建loadMore.ts，接着在main.ts中引入并挂载到应用实例上。最后，在相应的vue组件中应用该自定义指令，从而达到数据分页动态加载的效果。

1.在utils文件中新建一个loadMore.ts文件。

import type { Directive, App } from 'vue';

const debounce = function (func: any, delay: any) {
  let timer: any = null
  return function () {
    if (timer) clearTimeout(timer)
    timer = null
    let self = this
    let args = arguments
    timer = setTimeout(() => {
        func.apply(self, args)
    }, delay)
  }
}

const loadMore: Directive = {
  mounted (el: any, binding: any, vnode: any) {
    const { expand } = binding.modifiers
    // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
    if (expand) {
      /**
       * target 目标DOM节点的类名
       * distance 减少触发加载的距离阈值，单位为px
       * func 触发的方法
       * delay 防抖时延，单位为ms
       * load-more-disabled 是否禁用无限加载
       */
      let { target, distance = 0, func, delay = 200 } = binding.value
      if (typeof target !== 'string') return
      let targetEl = el.querySelector(target)
      if (!targetEl) {
        console.log('找不到容器')
        return
      }
      binding.handler = function () {
        const