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实例详解

相关推荐
夫琅禾费米线22 分钟前
[有趣的JavaScript] 为什么typeof null返回 object
开发语言·前端·javascript
nothing_more_than4 小时前
draggable的el-dialog实现对话框标题可以选择
javascript·vue.js·element-plus
小镇程序员5 小时前
vue2 src自定义事件
前端·javascript·vue.js
炒毛豆6 小时前
vue3+echarts+ant design vue实现进度环形图
javascript·vue.js·echarts
AlgorithmAce8 小时前
Live2D嵌入前端页面
前端
nameofworld8 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
别拿曾经看以后~8 小时前
原生Android调用uniapp项目中的方法
android·vue.js·uni-app
前端fighter8 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
流着口水看上帝8 小时前
JavaScript完整原型链
开发语言·javascript·原型模式
guokanglun8 小时前
JavaScript数据类型判断之Object.prototype.toString.call() 的详解
开发语言·javascript·原型模式