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

最新推荐文章于 2025-10-10 17:39:45 发布

原创最新推荐文章于 2025-10-10 17:39:45 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

本文介绍如何在 Vue 项目中使用 mounted 事件创建滚动监听，实现当表头接近页面顶部时，表头位置固定并跟随滚动。关键在于处理 window.scroll 事件和计算表头元素的位置变化。

首先需要在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"