element plus el-table 添加滚动监听

项目上使用 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实例详解

相关推荐
Martin -Tang23 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发24 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html