实现El-table组件超出屏幕时自动滚动,到底时,自动回到顶部继续向下滚动。暂不支持无限连续滚动。
参考博客:https://blog.51cto.com/u_16717092/11937532
Html:
<el-table ref="table"
@mouseenter.native="stopScroll()"
@mouseleave.native="startScroll(150,2)">
.
.
.
</el-table>
Vue:
...
methods: {
startScroll(speed, step) {
// 滚动速度
speed = speed ? speed : 150;
// 步长
step = step ? step : 1;
const bodyWrapper = this.$refs.table.$refs.bodyWrapper
this.scrolltimer = window.setInterval(() => {
// 元素自增距离顶部1像素
bodyWrapper.scrollTop += step;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (bodyWrapper.clientHeight + bodyWrapper.scrollTop === bodyWrapper.scrollHeight) {
// 重置table距离顶部距离
bodyWrapper.scrollTop = 0
}
}, speed)
},
stopScroll() {
// 关闭定时器
window.clearInterval(this.scrolltimer)
},
}