ElementUI table无缝循环滚动的示例代码

 更新时间:2022年08月08日 14:17:49   作者:m1pha博客  
这篇文章主要介绍了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无缝循环滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文教你实现JavaScript防抖优化代码

    一文教你实现JavaScript防抖优化代码

    在我们前端编程中,假如我们要给后端发送请求,万一手抖多点了几次,多发送了几遍怎么办,那就得用防抖处理,下面小编就来教大家如何实现防抖吧
    2023-11-11
  • js的正则test,match,exec详细解析

    js的正则test,match,exec详细解析

    本篇文章主要是对js的正则test,match,exec进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 仿淘宝JSsearch搜索下拉深度用法

    仿淘宝JSsearch搜索下拉深度用法

    本篇文章通过仿照淘宝搜索关键字后下拉相关产品搜索样子的制作,深度分析了JSsearch的用法,一起跟着小编学习下吧。
    2018-01-01
  • 纯js实现瀑布流布局及ajax动态新增数据

    纯js实现瀑布流布局及ajax动态新增数据

    这篇文章主要介绍了基于javascript实现瀑布流布局,及ajax动态新增数据的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • javascript跟随鼠标x,y坐标移动的字效果

    javascript跟随鼠标x,y坐标移动的字效果

    javascript跟随鼠标x,y坐标移动的字效果...
    2007-04-04
  • JS字符串拼接的几种常见方式总结

    JS字符串拼接的几种常见方式总结

    最近有经常用到连接字符串的方法,但是对整体的方法比较模糊,这里记录一下,下面这篇文章主要给大家介绍了关于JS字符串拼接的几种常见方式,需要的朋友可以参考下
    2022-11-11
  • JavaScript对象_动力节点Java学院整理

    JavaScript对象_动力节点Java学院整理

    这篇文章主要为大家详细介绍了JavaScript对象的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 一文彻底理解js原生语法prototype,__proto__和constructor

    一文彻底理解js原生语法prototype,__proto__和constructor

    作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,下面这篇文章主要给大家介绍了关于js原生语法prototype,__proto__和constructor的相关资料,需要的朋友可以参考下
    2021-10-10
  • Javascript对象属性方法汇总

    Javascript对象属性方法汇总

    这篇文章主要是对Javascript对象属性方法进行了详细的汇总介绍。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript实现大文件上传的示例代码

    JavaScript实现大文件上传的示例代码

    这篇文章主要为大家详细介绍了JavaScript实现大文件上传功能的示例代码,文中的代码讲解详细,对我们学习JavaScript有一定帮助,感兴趣可以跟随小编一起学习一下
    2022-11-11

最新评论