vue3 + element-plus 表格是否触底指令

一、描述：

        1、监测是否到达容器底部 默认检测的是 element-plus的 table 可滚动元素  如果想判断其他元素  则需要传入指定的class值

        2、v-more="{ className, callback }"  className滚动元素的类名(.dom_name(默认是.el-scrollbar__wrap))  callback 为组件内回调函数(值为函数)

二、代码：

// 监测是否到达容器底部 默认检测的是 element-plus的 table 可滚动元素  如果想判断其他元素  则需要传入指定的class值
// v-more="{ className, callback }"  className滚动元素的类名(.dom_name(默认是.el-scrollbar__wrap))  callback 为组件内回调函数(值为函数)

import { ref } from 'vue'

const middleware = ref({})
const handler = e => {
  const { callback } = middleware.value.value
  if (
    e.target.children[0].getBoundingClientRect().height - e.target.getBoundingClientRect().height <= e.target.scrollTop &&
    Object.prototype.toString.call(callback) === '[object Function]'
  )
    callback()
}

export default {
  mounted(el, binding) {
    const { className } = binding.value
    middleware.value = binding
    const wrap = el.querySelector(className ? className : '.el-scrollbar__wrap')
    wrap?.addEventListener('scroll', handler)
  },
}

三、使用：

<template>
  <!-- 第一步、绑定指令 注意我这个是全局指令  别忘了注册这个指令  否则不好使 -->
  <el-table v-more="{ callback }">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup>
  // 第二部、到大表格底部回调
  const callback = () => {
    console.log('触底的回调函数');
  }
</script>