element plus el-table 添加滚动监听

东方fan2023-11-01 10:39

项目上使用 el-table 加载1000 条数据，同时有三个列的数据需要实时更新，而数据更新时会导致页面不响应，表现为拖动过程中突然卡顿。为了解决卡顿问题提出了两个解决办法：一个是滚动时清除定时器，不再刷新表格，滚动结束后恢复定时器；另一个是只刷新视口数据，更新的数据量少了，自然不会卡顿。后者通过前者监听表格滚动，实时更新纵向滚动位移，再结合行高计算偏移量即可。下面主要讲述如何监听表格滚动。

网上可以搜到 element 的表格滚动监听方法，试过之后发现不适用于 element plus，经过翻阅源码后找见了以下方法：

TypeScript 复制代码

const tableRef = ref<InstanceType<typeof ElTable>>();
var timer: NodeJS.Timeout;
var scrollEndTimer: NodeJS.Timeout;
var tableScrollTop = 0;

const callback = () => {
  timer = setInterval(queryData, 3000);
};

onMounted(() => {
  // 开始滚动后清除定时器，滚动结束后启动定时器
  const scrollBarRef: any = tableRef.value!.$refs.scrollBarRef;
  const wrapRef = scrollBarRef.wrapRef;
  // onscrollend 事件只在较新的浏览器中支持，详见 MDN
  if ("onscrollend" in window) {
    wrapRef.addEventListener("scroll", (event: any) => {
      clearInterval(timer);
      tableScrollTop = event.target.scrollTop;
    });
    wrapRef.addEventListener("scrollend", callback);
  } else {
    wrapRef.addEventListener("scroll", () => {
      clearInterval(timer);
      clearTimeout(scrollEndTimer);
      scrollEndTimer = setTimeout(callback, 100);
    });
  }

  callback();
});

// 进入页面时启动定时器
onActivated(() => {
  if (timer) {
    clearInterval(timer);
  }
  callback();
});

// 离开页面时销毁定时器
onDeactivated(() => {
  clearInterval(timer);
});

以下是部分源码：
图1 图2

从图 1 可以看到，table body 是包裹在 el-scrollbar 中的，图 2 中可以看到 el-scrollbar 的内容部分可以通过 wrapRef 获取到，基于此就可以添加滚动监听了。

参考文章：超实用的全新JavaScript事件Scrollend实例详解