ElementUI table無縫回圈滾動
恰好實習的時候遇到了這個需求，而且網上的代碼有點僵硬，所以我改了改，順手水一篇博客出來，
部分思路來源：https://blog.csdn.net/qq_38543537/article/details/122842943
但是來源的代碼，在滾動到底部時會有非常生硬的切換，我這里改了一些代碼，讓它的滾動變得流暢，
效果：
代碼：
HTML：
<el-table ref="table" :data="https://www.cnblogs.com/m1pha/archive/2022/08/08/tableData" stripe style="width: 100%" height="402">
<el-table-column prop="num" label="序號" > </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)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501273.html
標籤：其他