您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇“ElementUI table怎么实现无缝循环滚动效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ElementUI table怎么实现无缝循环滚动效果”文章吧。
效果:
代码:
HTML:
<el-table ref="table" :data="TableData" stripe 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怎么实现无缝循环滚动效果”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。