首先是 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自动滚动结束
