ElementUI table怎么实现无缝循环滚动效果
导读:本文共1440字符,通常情况下阅读需要5分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:这篇“ElementUItable怎么实现无缝循环滚动效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ElementUItable怎么实现无缝循环滚动效果”文章吧。效果:代码:HTML:<el-tableref="table":data="Tab... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。这篇“ElementUItable怎么实现无缝循环滚动效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ElementUItable怎么实现无缝循环滚动效果”文章吧。
效果:
代码:
HTML:
<el-tableref="table":data="TableData"stripeheight="402"><el-table-columnprop="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(){//拿到相关元素constwrapper=this.$refs.table.bodyWrapperthis.timer=setInterval(()=>{//元素自增距离顶部1像素wrapper.scrollTop+=1//判断元素是否滚动到底部(可视高度+距离顶部=整个高度)if(wrapper.clientHeight+wrapper.scrollTop==wrapper.scrollHeight){//重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小)-整个高度/2wrapper.scrollTop=wrapper.scrollTop-wrapper.scrollHeight/2}},50)}}
补充:element UI 中table表格循环滚动方法
首先在表格上添加ref和设置高度,如下:
<el-table:data="tableList"height="300"ref="table"></el-table>
循环方法如下:
mounted(){//拿到表格挂载后的真实DOMconsttable=this.$refs.table//拿到表格中承载数据的div元素constdivData=table.bodyWrapper//拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)setInterval(()=>{//元素自增距离顶部1像素divData.scrollTop+=1//判断元素是否滚动到底部(可视高度+距离顶部=整个高度)if(divData.clientHeight+divData.scrollTop==divData.scrollHeight){//重置table距离顶部距离divData.scrollTop=0}},100)}
以上就是关于“ElementUItable怎么实现无缝循环滚动效果”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
本文:
ElementUI table怎么实现无缝循环滚动效果的详细内容,希望对您有所帮助,信息来源于网络。