element-ui的table自动滚动效果

1.给表格ref

<el-table
   ref="scrollTable"
   class="has-border-top"
   :data="dataList"
   :height="550px"
   :highlightCurrentRow="highlightCurrentRow"
   @cell-mouse-enter="mouseEnter"
   @cell-mouse-leave="mouseLeave"
>
</el-table>

 data(){
   return{
     interval: "",
   }
 }

mounted(){
  this.interval = setInterval(this.scroll, 20);
}

method:{
  scroll() {
     let maxHeight = this.$refs.scrollTable.$el.querySelectorAll(".el-table__body")[0].offsetHeight;
     let clientHeight = this.$refs.scrollTable.bodyWrapper.clientHeight;
      if (
        Math.abs(
          this.$refs.scrollTable.bodyWrapper.scrollTop -
            (maxHeight - clientHeight)
        ) < 5
      ) {
        //预留5像素误差
        this.$refs.scrollTable.bodyWrapper.scrollTop = 0;
      } else {
        this.$refs.scrollTable.bodyWrapper.scrollTop += 1; //32是每一行表格的高度，每秒滚一行
      }
   },
 //鼠标移入停止滚动
  mouseEnter() {
    clearInterval(this.interval);
  },
  //鼠标离开继续滚动
  mouseLeave() {
     this.interval = setInterval(this.scroll, 20);
 },
}

最后要清除定时器

beforeDestroy() {
    clearInterval(this.interval);
  }

如果想修改滚动条的样式

.el-table{
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
     width: 5px; /*滚动条宽度*/
     height: 0px; /*滚动条高度*/   
  }
}