2022-08-30 el-table 实现自动滚动

表格代码 要加上 ref="table"

<template>
  <div class="">
    <el-table :data="tableData" ref="table" height="150" style="width: 100%">
 
          <el-table-column prop="date" label="日期" width="180"> </el-table-column>
 
          <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
 
          <el-table-column prop="address" label="地址"> </el-table-column>
 
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
           {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
           {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
           {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
           {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
           {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
           {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
    }
  },
   mounted() {
    this.infinitScroll()
  },
  methods: {
    infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      divData.onmouseover = function () {
        clearInterval(t);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function () {
        start()
      }; //鼠标移出，继续滚动
 
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      let t;
      function start() {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight >= divData.scrollHeight){
          return;
        }
        t = setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, 100)
      }
      start()
    },
  },
 
}
</script>