需求:
1.表格自动滚动,速度可调节
2.鼠标移入的时候停止滚动
template:
<el-table
......
ref="refTable"
@mouseenter.native="mouseEnter"
@mouseleave.native="mouseLeave"
</el-table>
data () {
return {
rolltimer: '', //定时任务
rollPx: 1,
rollTime: 4, //滚动时间
}}
mounted () {
this.autoRoll()
}
methods:{
mouseEnter () {
// 鼠标进入停止滚动和切换的定时任务
this.autoRoll(true)
},
mouseLeave () {
// 开启
this.autoRoll()
},
autoRoll (stop) {
if (stop) {
clearInterval(this.rolltimer)
return
}
// 拿到表格挂载后的真实DOM
const table = this.$refs.refTable
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果
this.rolltimer = setInterval(() => {
// 元素自增距离顶部像素
divData.scrollTop += this.rollPx
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 6
}
}, this.rollTime * 10)
}
}