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

相关推荐
郑板桥3013 分钟前
tua-body-scroll-lock踩坑记录
前端·javascript
IT古董32 分钟前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
解道Jdon39 分钟前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
慢半拍iii1 小时前
JAVA Web —— A / 网页开发基础
前端
gnip2 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty2 小时前
基于hiprint的票据定位打印系统开发实践
javascript
新手村领路人3 小时前
Firefox自定义备忘
前端·firefox
乖女子@@@3 小时前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育3 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘4 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向