ElementUI table无缝循环滚动

ElementUI table无缝循环滚动

恰好实习的时候遇到了这个需求，而且网上的代码有点僵硬，所以我改了改，顺手水一篇博客出来。

部分思路来源：https://blog.csdn.net/qq_38543537/article/details/122842943

但是来源的代码，在滚动到底部时会有非常生硬的切换，我这里改了一些代码，让它的滚动变得流畅。

效果：

代码：

HTML：

<el-table ref="table" :data="tableData" stripe style="width: 100%" height="402">
        <el-table-column prop="num" label="序号" width="80"> </el-table-column>
        <!-- 其它table列 -->
      </el-table>

JS：

data() {
    return {
      timer: null,
        //注意：它需要将展示的数据额外复制一份（为了无缝滚动）
      tableData: [ 
        { num:1},
        { num:2},
        { num:3},
        { num:4},
        { num:5},
        { num:6},
        { num:7},
        { num:8},
        { num:9},
        { num:10},
        { num:1},
        { num:2},
        { num:3},
        { num:4},
        { num:5},
        { num:6},
        { num:7},
        { num:8},
        { num:9},
        { num:10},
      ]
    };
  },
methods: {
    //自动循环播放
    autoCycle() {
       //拿到相关元素
      const wrapper = this.$refs.table.bodyWrapper
//window.requestAnimationFrame()或许是更好的选择，但是有点快，
//如果要慢的话，可能需要写额外的判断或函数（difftime）
//优点是 减少回流和重塑。 缺点是 在主线程，如果卡的话会影响动画。
      this.timer = setInterval(() => {
        // 元素自增距离顶部1像素
        wrapper.scrollTop += 1
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) {
           // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
          wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2
        }
      }, 50)
    }
  }