ElementUI?table怎么實(shí)現(xiàn)無縫循環(huán)滾動效果

這篇“ElementUI table怎么實(shí)現(xiàn)無縫循環(huán)滾動效果”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“ElementUI table怎么實(shí)現(xiàn)無縫循環(huán)滾動效果”文章吧。

效果：

代碼：

HTML：

<el-table ref="table" :data="TableData" stripe  height="402">
        <el-table-column prop="num" label="序號" width="80"> </el-table-column>
        <!-- 其它table列 -->
      </el-table>

JS：

data() {
    return {
      timer: null,
        //注意：它需要將展示的數(shù)據(jù)額外復(fù)制一份（為了無縫滾動）
      errorTableData: [ 
        { 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: {
    //自動循環(huán)播放
    autoCycle() {
       //拿到相關(guān)元素
      const wrapper = this.$refs.table.bodyWrapper
      this.timer = setInterval(() => {
        // 元素自增距離頂部1像素
        wrapper.scrollTop += 1
        // 判斷元素是否滾動到底部(可視高度+距離頂部=整個(gè)高度)
        if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) {
           // 重置table距離頂部距離。值=(滾動到底部時(shí)，距離頂部的大小) - 整個(gè)高度/2
          wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2
        }
      }, 50)
    }
  }

補(bǔ)充：element UI 中table表格循環(huán)滾動方法

首先在表格上添加ref和設(shè)置高度，如下：

<el-table :data="tableList" height="300" ref="table"></el-table>

循環(huán)方法如下：

mounted() {
    // 拿到表格掛載后的真實(shí)DOM
    const table = this.$refs.table
    // 拿到表格中承載數(shù)據(jù)的div元素
    const divData = table.bodyWrapper
    // 拿到元素后，對元素進(jìn)行定時(shí)增加距離頂部距離，實(shí)現(xiàn)滾動效果(此配置為每100毫秒移動1像素)
    setInterval(() => {
        // 元素自增距離頂部1像素
        divData.scrollTop += 1
        // 判斷元素是否滾動到底部(可視高度+距離頂部=整個(gè)高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
            // 重置table距離頂部距離
            divData.scrollTop = 0
        }
    }, 100)
}

以上就是關(guān)于“ElementUI table怎么實(shí)現(xiàn)無縫循環(huán)滾動效果”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。