el-table滚动顶部时固定表头实现

最新推荐文章于 2025-04-01 11:28:57 发布

Forgive小麟

最新推荐文章于 2025-04-01 11:28:57 发布

阅读量2.1k

点赞数 2

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/FORGIVE66/article/details/118150930

版权

首先需要在mounted里面创一个滚轮事件

  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

然后定义这个事件

  handleScroll() {let scrollTop = window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop; //滑动的距离
      let heightTop = document.querySelector("#searchBar").offsetTop;
      if (scrollTop >= heightTop) {
        //表头到达页面顶部固定表头
        let top = scrollTop - (heightTop + 80);
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.position = "relative";
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.zIndex = "500";
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.top = `${top}px`;
      } else if (scrollTop == 0) {
        //表格横向
        // console.log('横拉')
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.position = "relative";
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.zIndex = "500";
      } else {
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.position = "";
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.top = "";
        document.getElementsByClassName(
          "el-table__header-wrapper"
        )[0].style.zIndex = "";
      }
    },

记得在el-table里面加id="searchBar"