// 设置自动滚动 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)
    },
Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐