ElementUI table无缝循环滚动

  • ElementUI table无缝循环滚动已关闭评论
  • 187 次浏览
  • A+
所属分类:Web前端
摘要

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


ElementUI table无缝循环滚动

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

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

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

效果:
ElementUI table无缝循环滚动

代码:

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)     }   }