element plus el-table 添加滚动监听

这篇具有很好参考价值的文章主要介绍了element plus el-table 添加滚动监听。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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);
});

以下是部分源码:

element plus el-table 添加滚动监听,Web,vue.js,javascript,前端,element plus
图1
element plus el-table 添加滚动监听,Web,vue.js,javascript,前端,element plus
图2

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

参考文章:超实用的全新JavaScript事件Scrollend实例详解文章来源地址https://www.toymoban.com/news/detail-736042.html

到了这里,关于element plus el-table 添加滚动监听的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中数据滚动显示 实现Element-UI中el-table内数据的懒加载

    工作中我们经常会用到element-ui组件库中的le-table组件来展示数据,但当table的数据源数量过大的时候统一展示可能会出现页面卡顿,且会影响用户体验,为此我们可以尝试对el-table中的数据做懒加载的效果展示: 1. 挂在阶段监听el-table的scroll滚动事件 2. 当table表格滚动条的位置

    2023年04月08日
    浏览(57)
  • 【vue】element-ui、el-table使用V-for循环动态添加表头和数据

    参考链接 https://blog.csdn.net/xz1589155358/article/details/126597271

    2024年02月11日
    浏览(71)
  • vue+element-ui el-table组件二次封装实现虚拟滚动,解决数据量大渲染DOM过多而卡顿问题

    某些页面不做分页时,当数据过多,会导致页面卡顿,甚至卡死 一、固定一个 可视区域 的大小并且其大小是不变的,那么要做到性能最大化就需要尽量少地渲染 DOM 元素,而这个最小值也就是可视范围内需要展示的内容,而可视区域之外的元素均可以不做渲染。 二、如何计

    2024年02月10日
    浏览(64)
  • Element Plus el-table 自定义合并行和列

    原文链接:Element Plus el-table 自定义合并行和列 目标效果是将表格行数据中某个属性值相同的项合并到一起,效果如下: sortArray() 此方法根据目标属性值( StoAlias )排序了。 点击 传送门 查看更多关于【el-table 合并行或列】的信息。

    2024年02月12日
    浏览(37)
  • Element Plus二次封装el-table、可编辑表格

    一、需求 在后台管理项目中,可以显而易见的见到表格组件,为了方便我们会把表格组件进行二次封装,即方便了开发,也方便了维护。 2023年04月01日更新单元格编辑功能 扩展 el-table 扩展【表格动态列展示】 整合版本,附带查询,分页,表头自定义展示,等其他功能。 注

    2024年02月07日
    浏览(50)
  • element-plus el-table 点击单行修改背景色

    element-plus + el-table 点击行选中并修改背景色+文字颜色 方法一: 重点: highlight-current-row element-plus 本身有给提供这个功能,而且比第二个方法更好用,第二个方法在有列固定的情况下,样式会不生效,所以建议直接用第一种 方法二: 重点: @row-click :row-style

    2024年02月15日
    浏览(37)
  • element-ui的table实现滚动加载,涵el-table组件封装一份

    重点就是 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e n e r 函数,想快点弄上去看效果的直接弄这个函数吧 如果不在mounted中则一定要this.$nextTick(() = this.addRollListener()) 示例代码 如果你把上面的看过了;只需要在 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e

    2023年04月08日
    浏览(62)
  • 修改element-ui中的表格el-table的滚动条样式

    一.单独修改element-ui中的表格el-table的滚动条样式(两种方法) 1. 2.  二.保持整个页面的滚动条的风格是一致(直接改全局的滚动条样式) 三.页面内某一组件滚动条样式美化  scroll-bar是需要滚动条组件的元素,类名自定义

    2024年02月11日
    浏览(60)
  • Element-UI el-table高度不固定,自适应高度显示滚动条

    表格内容过多时显示滚动条:可通过 max-height设置一个固定的数值高度实现,但是项目中的需求是表格的高度不能写死,要自适应高度来显示滚动

    2024年02月11日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包