ElementUI table无缝循环滚动(vue elementui table)

ElementUI table无缝循环滚动 恰好实习的时候遇到了这个需求，而且网上的代码有点僵硬，所以我改了改，顺手水一篇博客出来。 部分思路来源：https://blog.csdn.net/qq_38543537/article/details/122842943 但是来源的代码，在滚动到底部时会 ... ElementUI table无缝循环滚动

推荐整理分享ElementUI table无缝循环滚动(vue elementui table)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:elementui table slot,element table border,element-table,elementui table slot,elementui table slot,elementui table hover,elementui table slot,element ui table,内容如对您有帮助，希望把文章链接给更多的朋友！

恰好实习的时候遇到了这个需求，而且网上的代码有点僵硬，所以我改了改，顺手水一篇博客出来。

部分思路来源：https://blog.csdn.net/qq_38543537/article/details/122842943

但是来源的代码，在滚动到底部时会有非常生硬的切换，我这里改了一些代码，让它的滚动变得流畅。

效果：

代码：

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, //注意：它需要将展示的数据额外复制一份（为了无缝滚动） tableData: [ { 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) } }