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,
        //注意：它需要将展示的数据额外复制一份（为了无缝滚动）
      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: {
    //自动循环播放
    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表格循环滚动方法

首先在表格上添加ref和设置高度，如下：

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

循环方法如下：

mounted() {
?? ?// 拿到表格挂载后的真实DOM
?? ?const table = this.$refs.table
?? ?// 拿到表格中承载数据的div元素
?? ?const divData = table.bodyWrapper
?? ?// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
?? ?setInterval(() => {
?? ??? ?// 元素自增距离顶部1像素
?? ??? ?divData.scrollTop += 1
?? ??? ?// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
?? ??? ?if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
?? ??? ??? ?// 重置table距离顶部距离
?? ??? ??? ?divData.scrollTop = 0
?? ??? ?}
?? ?}, 100)
}

至此实现列表滚动，测试有效！

到此这篇关于ElementUI table无缝循环滚动的示例代码的文章就介绍到这了,更多相关ElementUI table无缝循环滚动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

查看更多关于ElementUI table无缝循环滚动的示例代码的详细内容...