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       this.timer = setInterval(() => {         // 元素自增距离顶部1像素         wrapper.scrollTop += 1         // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)         if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) {            // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2           wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2         }       }, 50)     }   }