element table横向滚动条（ElementUI table无缝循环滚动）

ElementUI table无缝循环滚动

恰好实习的时候遇到了这个需求              ，而且网上的代码有点僵硬 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，所以我改了改














，顺手水一篇博客出来 
  
  
  
  
  
  
  。

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

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

 


 


 


 


 


 


 

，让它的滚动变得流畅
  
  
  
  
  
  
  
。

效果：

代码：

HTML：

<el-table ref="table" :data="tableData" stripe > <el-table-column prop="num" label="序号" > </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) } }