vue3 el-table 触底加载

Liu_ha_ha

已于 2024-03-22 15:00:56 修改

阅读量247

点赞数 5

文章标签： vue.js elementui javascript

于 2024-03-21 13:42:57 首次发布

本文链接：https://blog.csdn.net/Liu_ha_ha/article/details/136906171

版权

<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("竖向滚动条已经滚动到底部");
    }
  }
}

使用element-plus "el-scrollbar__wrap" 改成 "ep-scrollbar__wrap"