使用el-table实现自动滚动

概要

在前端开发大屏的时候，我们会用到表格数据展示，有时候为了使用户体验更加好，会增加表格自动滚动。下边我将以示例代码，用element UI的el-table来讲一下。

技术实现

1 .增加dom监听，鼠标放上去的时候不滚动，鼠标离开的时候滚动

    let status = true;
      scrollDom.addEventListener('mouseover', () => {
        status = false;
      });

      scrollDom.addEventListener('mouseout', () => {
        status = true;
      });
     

2 通过判断dom的scrollHeight和scrollTop的关系，来实现滚动

this.timer = setInterval(() => {
        if (status) {
          debugger
          scrollDom.scrollTop += 1;
          if (scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop) < 1) {
            scrollDom.scrollTop = 0;
          }
        }
      }, 100);

3.当不需要使用，或者表格需要重新渲染的时候，我们需要清掉定时器

  clearInterval(this.timer);

完整代码

 startAutoScroll() {
      const scrollDom = this.$refs.tableList.bodyWrapper;
      let status = true;
      scrollDom.addEventListener('mouseover', () => {
        status = false;
      });

      scrollDom.addEventListener('mouseout', () => {
        status = true;
      });

      this.timer = setInterval(() => {
        if (status) {
          debugger
          scrollDom.scrollTop += 1;
          if (scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop) < 1) {
            scrollDom.scrollTop = 0;
          }
        }
      }, 100);
    },

原文地址：https://blog.csdn.net/weixin_38912662/article/details/140657947

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！