项目上使用 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 获取到,基于此就可以添加滚动监听了。