首先是 div结构布局
<div id="scrollId">//对el-table盒子设置 id 属性 <div style="height: 100%;"> <el-table row-class-name="tr_style" :stripe="true" :data="tableData" :show-header="false" :cell-style="{borderColor:'rgba(9, 14, 34, 1)'}" :header-cell-style="{borderColor:'rgba(9, 14, 34, 0.5)',fontWeight:'400',background:'#0d1d3f',color:'#fff'}"> <el-table-column align="center" border v-for="(item,index) in cellData" :key="index" :prop="item.prop"></el-table-column> </el-table> </div> </div>
data定义属性:
data() { return {
scrollTimer: null, // 滚动定时器 pauseTimer: null, // 暂停定时器 scrollId: 'scrollId', // 滚动容器id scrollDirection: 'down' // 滚动方向 up向上 down向下 };
},
在methods内添加以下方法
//滚动条触发事件 // 数据加载完成方法 dataCompleteFun() { // 开启滚动 this.autoScroll() }, autoScroll() { if (document.getElementById("scrollId")) { const scrollHeight = document.getElementById("scrollId").scrollHeight const clientHeight = document.getElementById("scrollId").clientHeight const scroll = scrollHeight - clientHeight // 滚动长度为0 if (scroll === 0) { return } } // 触发滚动方法 this.scrollFun() // 去除点击监听 window.document.removeEventListener('click', this.pauseScroll) // 重设点击监听 window.document.addEventListener('click', this.pauseScroll, false) }, pauseScroll() { // 定时器不为空 if (this.scrollTimer) { // 清除定时器 clearInterval(this.scrollTimer) this.scrollTimer = null // 一秒钟后重新开始定时器 this.pauseTimer = setTimeout(() => { this.scrollFun() }, 2000) } }, scrollFun() { // 如果定时器存在 if (this.scrollTimer) { // 则先清除 clearInterval(this.scrollTimer) this.scrollTimer = null } this.scrollTimer = setInterval(() => { // 获取滚动条高度 if (document.getElementById("scrollId")) { const scrollHeight = document.getElementById("scrollId").scrollHeight const clientHeight = document.getElementById("scrollId").clientHeight const scroll = scrollHeight - clientHeight // 获取当前滚动条距离顶部高度 const scrollTop = document.getElementById("scrollId").scrollTop // 向下滚动 if (this.scrollDirection === 'down') {
// 设置滚动速度 可更改 数字 2 为你想要的长度 const temp = scrollTop + 2 document.getElementById("scrollId").scrollTop = temp // 滚动 // 距离顶部高度 大于等于 滚动长度 if (scroll <= temp) { // 滚动到底部 停止定时器 clearInterval(this.scrollTimer) this.scrollTimer = null // 改变方向 this.scrollDirection = 'up' // 一秒后重开定时器 setTimeout(() => { this.scrollFun() }, 1000) } // 向上滚动 } else if (this.scrollDirection === 'up') { const temp = scrollTop - 2 document.getElementById("scrollId").scrollTop = temp // 滚动 // 距离顶部高度 小于等于 0 if (temp <= 0) { // 滚动到底部 停止定时器 clearInterval(this.scrollTimer) this.scrollTimer = null // 改变方向 this.scrollDirection = 'down' // 一秒后重开定时器 setTimeout(() => { this.scrollFun() }, 1000) } } } }, 150) },
在methods外,与methods同级,添加以下生命周期方法
destroyed() { // 清理定时器 clearTimeout(this.pauseTimer) this.pauseTimer = null clearInterval(this.scrollTimer) this.scrollTimer = null // 清理点击监听 window.document.removeEventListener('click', this.pauseScroll) },
updated() { this.dataCompleteFun() },
自此 el-table自动滚动结束