el-table自动向上滚动封装
【代码】el-table自动向上滚动。
·
// 设置自动滚动 dom节点 => this.$refs.table
var rolltimer
function autoRoll(stop, dom) {
const table = dom
// 拿到表格中承载数据的div元素
const divData = table.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
if (stop) {
//再通过事件监听,监听到 组件销毁 后,再执行关闭计时器。
window.clearInterval(rolltimer)
} else {
rolltimer = window.setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (
divData.clientHeight + divData.scrollTop ==
divData.scrollHeight
) {
// 重置table距离顶部距离
divData.scrollTop = 0
// 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2
// divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
}
}, 150) // 滚动速度
}
},
// 鼠标进入
mouseEnter() {
// 鼠标进入停止滚动和切换的定时任务
autoRoll(true)
},
// 鼠标离开,离开记得再次传入dom节点
mouseLeave(dom) {
// 开启
autoRoll(false, dom)
},
更多推荐


所有评论(0)