实现el-table表格滚动

实现el-table表格滚动

<template>
  <div >
    <el-table
      :data="tableData"
      height="400px"
      ref="scrollTable"
    >
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      tableData: []
    };
  },
  beforeDestroy() {
    clearInterval(this.timer); // 销毁定时器
  },
  mounted() {
   
    this.scrollbars();
  },
  methods: {
    scrollbars() {
      const table1 = this.$refs.scrollTable;
      // 拿到表格中承载数据的div元素
      const divData1 = table1.bodyWrapper;
      clearInterval(this.timer);
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.timer = setInterval(() => {
        // 元素自增距离顶部1像素
        divData1.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (
          divData1.clientHeight + divData1.scrollTop >=
          divData1.scrollHeight
        ) {
          // 重置table距离顶部距离
          divData1.scrollTop = 0;
        }
      }, 1200); // 滚动速度
    }
  },
};
</script>