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

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

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
可以使用 `el-table` 组件的 `height` 属性来设置表格的高度,然后再结合 `el-scrollbar` 组件来实现滚动条的功能。这样就可以让表头固定不动了。 具体实现方法如下: 1. 在 `el-table` 组件中加入 `height` 属性,并设置为表格的高度,例如: ``` <el-table :data="tableData" height="200px"> ``` 2. 在 `el-table` 组件外层加入 `el-scrollbar` 组件,例如: ``` <el-scrollbar> <el-table :data="tableData" height="200px"> <!-- 表头和表格内容 --> </el-table> </el-scrollbar> ``` 3. 在 `el-table` 组件中加入 `style` 属性,并设置表头的样式,例如: ``` <el-table :data="tableData" height="200px" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <!-- 其他表格列 --> </el-table> ``` 4. 在 `el-table` 组件中加入 `slot-scope` 属性,并设置 `header` 插槽的样式,例如: ``` <el-table :data="tableData" height="200px" style="width: 100%"> <el-table-column prop="name" label="姓名" slot-scope="{column}"> <div style="text-align: center">{{ column.label }}</div> </el-table-column> <el-table-column prop="age" label="年龄" slot-scope="{column}"> <div style="text-align: center">{{ column.label }}</div> </el-table-column> <!-- 其他表格列 --> <template slot="header"> <div style="position: sticky; top: 0; z-index: 1; background-color: #fff;"> <el-table :data="[{}]" style="width: 100%"> <el-table-column prop="name" label="姓名" header-align="center"></el-table-column> <el-table-column prop="age" label="年龄" header-align="center"></el-table-column> <!-- 其他表格列 --> </el-table> </div> </template> </el-table> ``` 注意,这里使用了一个空数组作为 `el-table` 的数据源,只是为了让表头渲染出来,实际上并不需要显示任何数据。使用 `position: sticky; top: 0;` 让表头固定顶部,使用 `z-index: 1;` 让表头滚动覆盖在表格内容上方,使用 `background-color: #fff;` 让表头背景色为白色,这样就与表格内容区域区分开了。使用 `header-align="center"` 让表头文字居中显示。 最终的代码如下: ``` <el-scrollbar> <el-table :data="tableData" height="200px" style="width: 100%"> <el-table-column prop="name" label="姓名" slot-scope="{column}"> <div style="text-align: center">{{ column.label }}</div> </el-table-column> <el-table-column prop="age" label="年龄" slot-scope="{column}"> <div style="text-align: center">{{ column.label }}</div> </el-table-column> <!-- 其他表格列 --> <template slot="header"> <div style="position: sticky; top: 0; z-index: 1; background-color: #fff;"> <el-table :data="[{}]" style="width: 100%"> <el-table-column prop="name" label="姓名" header-align="center"></el-table-column> <el-table-column prop="age" label="年龄" header-align="center"></el-table-column> <!-- 其他表格列 --> </el-table> </div> </template> </el-table> </el-scrollbar> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值