vue3+elementPlus实现el-table监听触底加载

方法一： 

<el-table class="scrollTable"></el-table>

import {
  ref,
  reactive,
  defineProps,
  onMounted,
  onUnmounted,
  defineEmits,
} from "vue";

const scrollTableDom = ref("");

onMounted(() => {
  scrollTableDom.value = document.querySelector(
    ".scrollTable .el-table__body-wrapper .el-scrollbar__wrap"
  );
  scrollTableDom.value.addEventListener("scroll", handleTableScroll);
});
onUnmounted(() => {
  scrollTableDom.value.removeEventListener("scroll", handleTableScroll);
});


const handleTableScroll = (event) => {
  const table = event.target;
  const scrollPosition =
    table.scrollHeight - table.scrollTop - table.clientHeight;
  if (scrollPosition <= 5) {
    loadMoreData();
  }
};

方法二：

<el-table ref="TableRef"></el-table>

import {
  ref,
  reactive,
  getCurrentInstance,
  defineProps,
  watch,
  onMounted,
  defineEmits,
  onUnmounted,
} from "vue";

onMounted(() => {
  // 挂载
  TableRef.value &&
    TableRef.value.$refs.bodyWrapper.addEventListener(
      "mousewheel",
      scrollBehavior
    );
});

onUnmounted(() => {
  // 卸载
  TableRef.value &&
    TableRef.value.$refs.bodyWrapper.removeEventListener(
      "mousewheel",
      scrollBehavior
    );
});

// 滚动行为
function scrollBehavior(e) {
  // 滚动方向判定
  const scrollDirection = e.deltaY > 0 ? "down" : "up";
  if (scrollDirection === "down") {
    // 获取提供实际滚动的容器
    const dom =
      TableRef.value.$refs.bodyWrapper.getElementsByClassName(
        "el-scrollbar__wrap"
      )[0];
    const { clientHeight, scrollTop, scrollHeight } = dom;
    console.log(clientHeight + scrollTop, scrollHeight);
    // 父容器高度 + 子容器距离父容器顶端的高度 = 子容器可滚动的高度
    if (scrollHeight - (clientHeight + scrollTop) <= 200) {
      console.log("竖向滚动条已经滚动到底部");
    }
  }
}