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

更新時間：2022年08月08日 14:17:49 作者：m1pha博客

這篇文章主要介紹了ElementUI table無縫循環(huán)滾動的示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

恰好實習的時候遇到了這個需求，而且網(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ù)額外復制一份（為了無縫滾動）
      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() {
       //拿到相關元素
      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和設置高度，如下：

<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)列表滾動，測試有效！

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

您可能感興趣的文章:

一文教你實現(xiàn)JavaScript防抖優(yōu)化代碼
在我們前端編程中,假如我們要給后端發(fā)送請求,萬一手抖多點了幾次,多發(fā)送了幾遍怎么辦,那就得用防抖處理,下面小編就來教大家如何實現(xiàn)防抖吧
2023-11-11
js的正則test,match,exec詳細解析
本篇文章主要是對js的正則test,match,exec進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
仿淘寶JSsearch搜索下拉深度用法
本篇文章通過仿照淘寶搜索關鍵字后下拉相關產品搜索樣子的制作，深度分析了JSsearch的用法，一起跟著小編學習下吧。
2018-01-01
純js實現(xiàn)瀑布流布局及ajax動態(tài)新增數(shù)據(jù)
這篇文章主要介紹了基于javascript實現(xiàn)瀑布流布局，及ajax動態(tài)新增數(shù)據(jù)的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04
javascript跟隨鼠標x,y坐標移動的字效果
javascript跟隨鼠標x,y坐標移動的字效果...
2007-04-04
JS字符串拼接的幾種常見方式總結
最近有經(jīng)常用到連接字符串的方法,但是對整體的方法比較模糊,這里記錄一下,下面這篇文章主要給大家介紹了關于JS字符串拼接的幾種常見方式,需要的朋友可以參考下
2022-11-11
JavaScript對象_動力節(jié)點Java學院整理
這篇文章主要為大家詳細介紹了JavaScript對象的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
一文徹底理解js原生語法prototype,__proto__和constructor
作為一名前端工程師,必須搞懂JS中的prototype、__proto__與constructor屬性,相信很多初學者對這些屬性存在許多困惑,容易把它們混淆,下面這篇文章主要給大家介紹了關于js原生語法prototype,__proto__和constructor的相關資料,需要的朋友可以參考下
2021-10-10
Javascript對象屬性方法匯總
這篇文章主要是對Javascript對象屬性方法進行了詳細的匯總介紹。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
JavaScript實現(xiàn)大文件上傳的示例代碼
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)大文件上傳功能的示例代碼，文中的代碼講解詳細，對我們學習JavaScript有一定幫助，感興趣可以跟隨小編一起學習一下
2022-11-11