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无缝循环滚动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

  • vue elementUI table表格数据 滚动懒加载的实现方法

    在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎

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

    恰好实习的时候遇到了这个需求,而且网上的代码有点僵硬,所以我改了改,顺手水一篇博客出来. 部分思路来源:https://blog.csdn.net/qq_38543537/article/details/122842943 但是来源的代码,在滚动到底部时会有非常生硬的切换,我这里改了一些代码,让它的滚动变得流畅. 效果: 代码: HTML: <el-table ref="table" :data="TableData" stripe style="w

  • element多个table实现同步滚动的示例代码

    element ui 实现多个table同时滚动,横向纵向滚动 代码如下: <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script> <div id="app"> <template> <el

  • elementUI table表格动态合并的示例代码

    1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示.使用elementUI table组件的方法 :span-method="objectSpanMethod".官网上看了一下demo,做的很直白,不过不太符合业务.在网上找了篇文章参考了一下 2.效果图如下: 在动态处理从后端拿回来的数据的时候,是需要从数据中找到一个唯一的"标识"去判断是否是相同种类的数据.然后根据这个"标识"去做逻辑判断. 3.代码: //合并单元格

  • vue实现公告消息横向无缝循环滚动

    本文实例为大家分享了vue实现公告消息横向无缝循环滚动的具体代码,供大家参考,具体内容如下 该组件实现了公告消息的无缝横向滚动.我命名为marqueex.vue文件,感谢原来博主的分享,我自己做个总结 marqueex.vue <template> <div class="my-outbox">   <div class="my-inbox" ref='box'>     <div class="my-list&q

  • vue实现列表无缝循环滚动

    本文实例为大家分享了vue实现列表无缝循环滚动的具体代码,供大家参考,具体内容如下 功能介绍: 在PC端网页,包括大数据.官网.后台管理平台开发中,可能会用到这种列表循环滚动的展示. 大致需求: 1.列表可以使用数组循环遍历:2.每隔几秒中列表数据向上滚动一定距离,展示下一条数据:3.滚动到最后一条数据时重新显示第一条开始的数据(类似走马灯.banner图的循环效果): 整体思路: 1.使用两个定时器嵌套实现:2.需要两个相同容器存放同样内容,实现无缝衔接效果: 效果展示: 完整代码: <!DO

  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    一.效果预览 最近在做一个活动页面,遇到幸运用户中奖的滚动公告需求.下面是实现效果: (gif录制略显卡顿,实际效果很流畅) 二.无缝滚动原理 1.容器宽高固定,超出内容隐藏: 2.内容准备2份,现参与滚动的内容有A.B两份,向左滚动: 3.滑动过程中,B份紧随A份之后,营造出无缝滚动回来的效果: 4.在A部分内容完全滚出容器的一瞬间,立刻将AB内容位置复原,由于A.B内容一模一样,这个复原过程很难看出来: 5.循环第3步: 三.代码 1.html部分 <template> <div c

  • vue实现图片滚动的示例代码(类似走马灯效果)

    上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde

  • js实现无缝循环滚动

    本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下 1.图片格式:260*400. 2.使用循环定时器轻松实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> </head> <style type="text/css"&

  • 移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)

    在ionic App中遇到一个文字上下循环滚动的效果实现,网上查了之后才知道有个通俗的名字-跑马灯. 这里借助了jQuery库的选择器和动画函数,并且把jquery的操作封装到指令里.先看指令代码: angular.module('starter') .directive('slideScroll', function ($window, $timeout) { return { restrict: 'AE', link: function (scope, element, attr) { va

  • 微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

    微信小程序,是属于小程序的一种,英文名为Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用.微信小程序也是基于H5,JS的开发. 一. 清空输入框信息(重置输入框信息恢复默认值) 这是我在微信小程序实训开发的过程中出现的问题,多次思考后终于解决了输入框内已发送的消息无法被清空这个问题.从另一个角度说可以把清空输入框信息理解为重置输入框信息恢复初始默认值.以下是我的解决方案,希望对你们有所帮助. 首先

随机推荐