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

import type { Directive, App } from 'vue';const debounce = function (func: any, delay: any) {let timer: any = nullreturn function () {if (timer) clearTimeout(timer)timer = nulllet self = thislet args = argumentstimer = 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.valueif (typeof target !== 'string') returnlet targetEl = el.querySelector(target)if (!targetEl) {console.log('找不到容器')return}binding.handler = function () {const { scrollTop, scrollHeight, clientHeight } = targetEllet disabled = el.getAttribute('load-more-disabled')disabled = vnode[disabled] || disabledif (scrollHeight <= scrollTop + clientHeight + distance) {if (disabled == 'true') returnfunc && func()}}targetEl.addEventListener('scroll', binding.handler)} else {binding.handler = debounce(function () {const { scrollTop, scrollHeight, clientHeight }  = elif (scrollHeight === scrollTop + clientHeight) {binding.value && binding.value()}}, 200)el.addEventListener('scroll', binding.handler)}},unmounted (el: any, binding: any) {let { arg } = binding// 使用更丰富的功能，支持父组件的指令作用在指定的子组件上if (arg === 'expand') {/*** target 目标DOM节点的类名* offset 触发加载的距离阈值，单位为px* method 触发的方法* delay 防抖时延，单位为ms*/const { target } = binding.valueif (typeof target !== 'string') returnlet targetEl = el.querySelector(target)targetEl && targetEl.removeEventListener('scroll', binding.handler)targetEl = null} else {el.removeEventListener('scroll', binding.handler)el = null}}
};export function setupLoadMoreDirective(app: App) {app.directive('loadMore', loadMore);
}export default loadMore;

2.在main.ts引入该文件，挂在到app上。

import { setupLoadMoreDirective } from '@/utils/loadMore';const app = createApp(App);
setupLoadMoreDirective(app)

3.在vue文件中加上该指令

  <el-tablev-loadMore.expand="{func: loadmore, target: '.el-scrollbar__wrap', delay: 300}":load-more-disabled="false"
</el-table>
const loadmore = () => {console.log(2);
}