vue element el-table表头吸顶实现详情（适用于表头无fixed属性使用）

el-table表头吸顶实现详情（适用于表头无fixed属性使用）

1、设置 ref=“tableSort”

<el-table
        ref="tableSort"
        v-loading="listLoading"
        :data="list"
        border
        @selection-change="setSelectRows"
        @sort-change="sortChange"
      >

2、设置页面滚动条

mounted() { //添加监听滚动条事件
      window.addEventListener('scroll', this.handleScroll, true)
    },
    destroyed() { //移除（跳转页面后移除）
      window.removeEventListener('scroll', this.handleScroll, true)
    },

3、获取el-table 表头css添加position属性

handleScroll(e) {
        let scrollTop = e.target.scrollTop //滑动的距离
        let heightTop = this.$refs['tableSort'].$parent.$parent.$el.offsetTop //距离顶部高度
        if (scrollTop >= heightTop) { //表头到达页面顶部固定表头
          // console.log('固定')
          let top = scrollTop - (heightTop + 52)
          $('.el-table__header-wrapper')[0].style.position = 'relative'
          $('.el-table__header-wrapper')[0].style.zIndex = '500'
          $('.el-table__header-wrapper')[0].style.top = `${top}px`
        } else if (scrollTop == 0) {//表格横向
          // console.log('横拉')
          $('.el-table__header-wrapper')[0].style.position = 'relative'
          $('.el-table__header-wrapper')[0].style.zIndex = '500'
        } else {
          $('.el-table__header-wrapper')[0].style.position = ''
          $('.el-table__header-wrapper')[0].style.top = ''
          $('.el-table__header-wrapper')[0].style.zIndex = ''
        }
      },

效果显示：

横拉：

参考文章：https://blog.csdn.net/qq_36940740/article/details/108140934