使用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);
    },