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