实现El-table组件超出屏幕时自动滚动

2025-06-05 / 13 阅读 / Vue
实现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)
    },
}
相关推荐