ElementUI table无缝循环滚动
m1pha博客 人气:0恰好实习的时候遇到了这个需求，而且网上的代码有点僵硬，所以我改了改，顺手水一篇博客出来。
部分思路来源：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)
}至此实现列表滚动，测试有效！
加载全部内容