element 表格滚动 hover移入暂停

最新推荐文章于 2024-04-08 13:59:57 发布

#Ltf

最新推荐文章于 2024-04-08 13:59:57 发布

阅读量317

点赞数

分类专栏： vue区文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_46032911/article/details/130729963

版权

vue区专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先用到cell-mouse-enter和cell-mouse-leave这两个属性，
不清楚的可以看下方链接

elementui

@cell-mouse-enter="moseoverTabel"
@cell-mouse-leave="moseoutTabel"

代码展示：

// 鼠标移入事件，暂停计时器
  moseoverTabel() {
    // 清除定时器
    window.clearInterval(this.timer);
  },
  // 鼠标移出事件,开启自动滚动
  moseoutTabel() {
    this.scrollAutomatic();
  },
  scrollAutomatic() {
  //这里判断表格数据过少，就不滚动
      if (this.tableData33.length <= 4) {
        return;
      }
      // 计算滚动高度--获取内容区dom
      var tabelBodyDom = window.document.querySelector(
        ".table_father_1 .el-table__body"
      );
      //获取滚动条最大滚动高度---156px指内容区的高度
      var scrollHiehgt = this.tableData33.length * 39 - 156;
      
      // 实现滚动
      if (scrollHiehgt > 0) {
        // 获取实时margin-top
        var i = 0 - window.getComputedStyle(tabelBodyDom).marginTop.replace("px", "");
        // 定时器滚动
        this.timer = window.setInterval(() => {
        //当滚动到最上方时从头开始，否则使 marginTop++
          if (i === scrollHiehgt) {
            i = 0;
          }
          tabelBodyDom.style.marginTop = 0 - i + "px";
          i++;
        }, 40);
      }
    },