ElementUI table無縫循環(huán)滾動的示例代碼
恰好實習(xí)的時候遇到了這個需求,而且網(wǎng)上的代碼有點僵硬,所以我改了改,順手水一篇博客出來。
部分思路來源: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, //注意:它需要將展示的數(shù)據(jù)額外復(fù)制一份(為了無縫滾動) 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: { //自動循環(huán)播放 autoCycle() { //拿到相關(guān)元素 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表格循環(huán)滾動方法
首先在表格上添加ref和設(shè)置高度,如下:
<el-table :data="tableList" height="300" ref="table"></el-table>
循環(huán)方法如下:
mounted() { ?? ?// 拿到表格掛載后的真實DOM ?? ?const table = this.$refs.table ?? ?// 拿到表格中承載數(shù)據(jù)的div元素 ?? ?const divData = table.bodyWrapper ?? ?// 拿到元素后,對元素進行定時增加距離頂部距離,實現(xiàn)滾動效果(此配置為每100毫秒移動1像素) ?? ?setInterval(() => { ?? ??? ?// 元素自增距離頂部1像素 ?? ??? ?divData.scrollTop += 1 ?? ??? ?// 判斷元素是否滾動到底部(可視高度+距離頂部=整個高度) ?? ??? ?if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) { ?? ??? ??? ?// 重置table距離頂部距離 ?? ??? ??? ?divData.scrollTop = 0 ?? ??? ?} ?? ?}, 100) }
至此實現(xiàn)列表滾動,測試有效!
到此這篇關(guān)于ElementUI table無縫循環(huán)滾動的示例代碼的文章就介紹到這了,更多相關(guān)ElementUI table無縫循環(huán)滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解
這篇文章主要為大家介紹了web3.js調(diào)用鏈上的方法操作NFT區(qū)塊鏈MetaMask詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08動態(tài)生成的IFRAME,設(shè)置SRC時的,不同位置帶來的影響
動態(tài)生成的IFRAME,設(shè)置SRC時的,不同位置帶來的影響。 以下所說的是在IE7下運行的。IE6下也是同樣。 在這個blog中,直接點擊運行代碼,和把下面代碼保存到為網(wǎng)頁在運行(以本地文件或域名訪問),效果不一樣。2008-03-03