亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

ElementUI table無縫循環(huán)滾動的示例代碼

 更新時間:2022年08月08日 14:17:49   作者:m1pha博客  
這篇文章主要介紹了ElementUI table無縫循環(huán)滾動的示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

恰好實習(xí)的時候遇到了這個需求,而且網(wǎng)上的代碼有點僵硬,所以我改了改,順手水一篇博客出來。

部分思路來源: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,
        //注意:它需要將展示的數(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
        // 判斷元素是否滾動到底部(可視高度+距離頂部=整個高度)
        if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) {
           // 重置table距離頂部距離。值=(滾動到底部時,距離頂部的大小) - 整個高度/2
          wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2
        }
      }, 50)
    }
  }

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

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

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

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

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

至此實現(xiàn)列表滾動,測試有效!

到此這篇關(guān)于ElementUI table無縫循環(huán)滾動的示例代碼的文章就介紹到這了,更多相關(guān)ElementUI table無縫循環(huán)滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論