vue中el-table滚动到下面吸顶效果实现

//此方法用于
    checkTableHeader(e) {
      // 获取滚动条滚动的高度
      let scrollTop = e.target.scrollTop;
      // 先获取父盒子的距离顶部的高度，从而算出子盒子的高度。
      let offsetTop = document.getElementsByClassName("pro-det-bottom")[0]
        .offsetTop;

      let contentWidth = `${window.innerWidth - 270}px`;

     
      // 当子盒子距离顶部的距离 小于滚动的高度，使子盒子吸顶。
      if (scrollTop > offsetTop - 50) {
        // 判断当前是否已经固定。headerStatus优化值 可有可无。
        if (!this.headerStatus) {
          this.headerStatus = true;
          // 当前子盒子要在父盒子中横向滚动 所以使用absolute 绝对定位。
          document.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.position = "fixed";
          document.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.zIndex = "500";
          document.getElementsByClassName(
            "el-table__header-wrapper"
          )[0].style.width = contentWidth;
        }
        // 绝对定位 top值需要一直改变 所以动态添加top值
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.top = ` 90px`;
      } else {
        this.headerStatus = false;
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.transform = `translate3d(0px, 0px, 0px)`;
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.position = "relative";
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.top = ` 0px`;
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.width = contentWidth;
      }
    },

html

  <div class=" pro-det-bottom">
                   

                   滚动列表
                </div>

调用

// 监听滚动条事件
    document.addEventListener("scroll", this.checkTableHeader, true);

删除监听

  destroyed() {
    document.removeEventListener("scroll", this.checkTableHeader, true);
  }