【无标题】vue2 + element-ui 表格无固定高度相对于指定父元素进行表头吸顶

原创 已于 2025-07-28 16:33:42 修改 · 265 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

于 2025-07-28 16:21:34 首次发布

网上找过很多表格吸顶类的都不太如意，自己动手封装一个。啥都不说了直接上vue代码：
1.主页代码：（主要是弹框，组件的地址根据自己copy的位置自行修改）

<template>
    <div class='mainPage'>
        <el-button type="primary" size="mini" @click="openDig">主要按钮</el-button>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
            <div class="rowBox">21321321</div>
            <tabCom 
                :stickyClass="'el-dialog__body'"
                :isSticky="true"
            />
        </el-dialog>
    </div>
</template>

<script>
import tabCom from "../components/tabCom.vue"
export default {
    components: {
        tabCom,
    },
    data() {
        return {
            dialogVisible:false
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        openDig(){
            this.dialogVisible = true
        },
        handleClose(){
            this.dialogVisible = false
        },
    },//methods End
}
</script>
<style lang='less' scoped>
/*@import url(); 引入公共css类 */
.rowBox{
    width: 100%;
    height: 50px;
    display: flex;
    background: red;
}
</style>

2：tabCom 组件内代码：

<template>
  <div :class="stickyClassKey">
    <div class="stickyFixed">
      <div class="stickyFixedContentBox">
        <div
          class="fixedLeftHeader"
          :class="showShadow? 'leftShadow': ''"
        ></div>
        <div class="stickyFixedMainBox"></div>
        <div
          class="fixedRightHeader"
          :class="showShadow? 'rightShadow': ''"
        ></div>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      :class="'isStickyTab'"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" fixed="left" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" width="200" label="地址"></el-table-column>
      <el-table-column prop="address" width="200" label="地址"></el-table-column>
      <el-table-column prop="address" width="200" label="地址"></el-table-column>
      <el-table-column prop="address" width="200" label="地址"></el-table-column>
      <el-table-column prop="address" width="200" label="地址"></el-table-column>
      <el-table-column prop="address" width="200" label="地址"></el-table-column>
      <el-table-column prop="address" width="200" label="地址"></el-table-column>
    </el-table>
   
  </div>
</template>

<script>
export default {
  components: {},
  props:{
    // 封装表格的外层class，可不同表格设置不同class，防止单页面多表格js错乱
    stickyClassKey:{
        type:String,
        default:"tab2"
    },
    isSticky:{
        type:Boolean,
        default: false
    },
    // 设置表格相对于外层某个父元素进行吸顶
    stickyClass:{
        type:String,
        default:"tabBox"
    },
  },
  data() {
    return {
      // 测试数据
        tableData: [
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
            {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
        ],
        headerTimer:null,
        showShadow:false
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { 
    this.tabSticky()
  },
  methods: {
    // 表头吸顶
    tabSticky(){
      let stickyDom = document.querySelector('.isStickyTab') || null

      if(stickyDom && this.isSticky){
        this.$nextTick(() => {
          let stickyClass = this.stickyClass
          let stickyClassKey = this.stickyClassKey? `.${this.stickyClassKey}`:''
          
          let outDom = document.querySelector(`.${stickyClass}`)
          let contentBoxDom = document.querySelector(`${stickyClassKey} .stickyFixed .stickyFixedMainBox`)
          let domScoll = document.querySelector(`${stickyClassKey} .el-table__body-wrapper`)

          // outDom 实时滚动窗口大小变化
          window.onresize = () => {
            if(this.headerTimer){
              clearTimeout(this.headerTimer)
              this.headerTimer = null
            }
            this.headerTimer = setTimeout(() => {
              this.tabStickyFun()
            },100)
          }
          // outDom 实时滚动监听在(最外层浏览器页面下)
          outDom.addEventListener('scroll',this.tabStickyFun);

          // 表格横向滚动 监听
          domScoll.addEventListener('scroll',(e)=>{
            contentBoxDom.scrollLeft = e.target.scrollLeft
          });
          contentBoxDom.addEventListener('scroll',(e)=>{
            domScoll.scrollLeft = e.target.scrollLeft
          });

        })
      }
    },
    tabStickyFun(){
      let stickyClass = this.stickyClass
      let stickyClassKey = this.stickyClassKey? `.${this.stickyClassKey}`:''

      let stickyDom = document.querySelector(`.${stickyClass} .isStickyTab`) || null
      let outDom = document.querySelector(`.${stickyClass}`)
      let tabHeaderWrapperDom = document.querySelector(`${stickyClassKey} .isStickyTab .el-table__header-wrapper`)
      let tableDom = document.querySelector(`${stickyClassKey} .el-table`)
      let tabHeaderDom = document.querySelector(`${stickyClassKey} .el-table__header`)
      // 表格栏 fixed固定栏表头
      let tabHeaderDomLeft = document.querySelector(`${stickyClassKey} .isStickyTab .el-table__fixed`)
      let tabHeaderDomRight = document.querySelector(`${stickyClassKey} .isStickyTab .el-table__fixed-right`)
      let fixedLeftHeader = document.querySelector(`${stickyClassKey} .stickyFixed .fixedLeftHeader`)
      let fixedRightHeader = document.querySelector(`${stickyClassKey} .stickyFixed .fixedRightHeader`)
   
      let stickyFixedDom = document.querySelector(`${stickyClassKey} .stickyFixed`)
      let contentBoxDom = document.querySelector(`${stickyClassKey} .stickyFixed .stickyFixedMainBox`)
      let domScoll = document.querySelector(`${stickyClassKey} .el-table__body-wrapper`)
  
      // 给table el-table__header-wrapper 赋予高度 使table__header fixed的时候高度不会塌陷
      tabHeaderWrapperDom.style.height = tabHeaderDom.offsetHeight + 'px'
      let wrapperWidth = tabHeaderWrapperDom.offsetWidth
      stickyFixedDom.style.width = wrapperWidth + 'px'
      
      // 获取各个dom的位置参数
      let outDomOffsetTop = outDom.offsetTop
      let outDomScrollTop = outDom.scrollTop
      let tableDomHeight = tableDom.offsetHeight
      
      let domTop = this.getDom(stickyDom,outDom,0) || 0
      let stickyInOffset = (domTop - outDomOffsetTop) + tabHeaderDom.offsetHeight - tabHeaderDom.clientTop
      outDom.style.position = "relative"
      let tableOffsetAllHeight = (domTop - outDomOffsetTop - tabHeaderDom.clientTop) + tableDomHeight || 0
      
      if(outDomScrollTop >= stickyInOffset){
        let tabStickyFixedDom = tabHeaderWrapperDom.querySelector(".stickyFixed") || null
        if(!tabStickyFixedDom){
          contentBoxDom.appendChild(tabHeaderDom)
          tabHeaderWrapperDom.appendChild(stickyFixedDom)
        }

        this.showShadow = true
        if(outDomScrollTop >= tableOffsetAllHeight){
          stickyFixedDom.style.zIndex =  -10
        }else{
          // fixed 左边处理
          if(tabHeaderDomLeft && fixedLeftHeader.childNodes.length<1){
            let tabHeaderDomLeftWidth = document.querySelector(`${stickyClassKey} .isStickyTab .el-table__fixed`).offsetWidth
            fixedLeftHeader.style.width = tabHeaderDomLeftWidth + 'px'
            fixedLeftHeader.style.height = tabHeaderWrapperDom.offsetHeight + 'px'
            fixedLeftHeader.appendChild(tabHeaderDomLeft.querySelector(".el-table__fixed-header-wrapper"))
          }
          //fixed 右边边处理
          if(tabHeaderDomRight && fixedRightHeader.childNodes.length<1){
            let tabHeaderDomRightWidth = document.querySelector(`${stickyClassKey} .isStickyTab .el-table__fixed-right `).offsetWidth
            fixedRightHeader.style.width = tabHeaderDomRightWidth + 'px'
            fixedRightHeader.style.height = tabHeaderWrapperDom.offsetHeight + 'px'
            fixedRightHeader.appendChild(tabHeaderDomRight.querySelector(".el-table__fixed-header-wrapper"))
          }

          // 判断当前table横向是否有滚动条
          if(domScoll.scrollWidth > domScoll.clientWidth){
            fixedLeftHeader.style.display = 'block'
            fixedRightHeader.style.display = 'block'
          }else{
            if(tabHeaderDomRight){
              fixedLeftHeader.style.display = 'block'
            }else{
              fixedLeftHeader.style.display = 'none'
            }
            if(tabHeaderDomRight){
              fixedRightHeader.style.display = 'block'
            }else{
              fixedRightHeader.style.display = 'none'
            }
          }
          
          tabHeaderWrapperDom.style.position = "relative"
          stickyFixedDom.style.position =  'absolute'
          tabHeaderWrapperDom.style.overflow = "visible"
          let fixedScrollTop = outDomScrollTop - (domTop - outDomOffsetTop) 
          stickyFixedDom.style.top =  fixedScrollTop + 'px'

          stickyFixedDom.style.width =  tabHeaderWrapperDom.offsetWidth + 'px'
          stickyFixedDom.style.height =  tabHeaderWrapperDom.offsetHeight + 'px'
          stickyFixedDom.style.zIndex =  5
        }
      }else{
        stickyFixedDom.style.position = 'relative'
        stickyFixedDom.style.top = 'inherit'
        stickyFixedDom.style.zIndex =  1
        this.showShadow = false
      }
    },
    getDom(dom,outDom,top){
      let num = top
      num += dom.offsetTop
      let parent = dom.offsetParent
      if(parent && parent.isEqualNode(outDom.offsetParent)){
        return num
      }else{
        return this.getDom(parent,outDom,num)
      }
    },
  },//methods End
}
</script>
<style lang='less' scoped>
/*@import url(); 引入公共css类 */
.stickyFixed{
  position: absolute;
  z-index: -10;
  background-color: #f4f4f4;
  overflow: hidden;
  .stickyFixedContentBox{
    position: relative;
    width: 100%;
    height: 100%;
   
  }
  .stickyFixedMainBox{
    width: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .fixedLeftHeader,
  .fixedRightHeader{
    position: absolute;
    z-index: 5;
    background-color: #f4f4f4;
    overflow: hidden;
    ::v-deep .is-hidden{
      // display: none !important;
      // opacity: 0;
    }
  }
  .fixedLeftHeader{
    left: 0;
    top: 0;
  }
  .leftShadow{
    box-shadow: 1px 0 10px rgba(0,0,0,.12);
  }
  .fixedRightHeader{
    right: 0;
    top: 0;
    ::v-deep .el-table__fixed-header-wrapper{
      right: 0;
      left: inherit !important;
    }
  }
  .rightShadow{
    box-shadow: -1px 0 10px rgba(0,0,0,.12);
  }

  ::v-deep .el-table__header{
    width: 100% !important;
    th{
      border: 1px solid #ebeef5;
      border-right: 0px;
      background-color: #f4f4f4;
      // background-color: transparent;
    }
    th:nth-last-child(2){
      border-right: 1px solid #EBEEF5;
    }
    
  }
}
</style>
UMR_umr
关注
elementUI Table组件实现表头吸顶效果
m0_58352785的博客
01-21 1127
当 table 内容过多的时候，页面上滑滚动，表头的信息也会随着被遮挡，无法将表头信息和表格内容对应起来，需要进行表头吸顶。注册指令 directives/sticky-header.js。❗️❗️❗️父元素不要有 overflow: hidden;环境：vue2.6+、element UI。main.js 引入。
在vue中如何实现吸顶
WeiflR10的博客
04-20 1599
一、简单吸顶 思路：需要写两个样式，一个吸顶样式，一个正常样式，通过监听scroll事件，实现吸顶功能 //fix_info_title为吸顶样式通过固定定位实现，info_title为正常样式 <div :class="isceiling?'fix_info_title':'info_title'"> <span @click="goproinfo(0)" :...
使ElementUI的el-table表头自动吸顶，支持左右固定列
伶俜Monster
04-10 3688
在使用el-table的时候，在数据多的情况下滚动表格会看不到表头是什么，为了用户体验可以使用表头吸顶来展示，如此丝滑的操作谁见了都说好。
vue3 element-plus el-table表头冻结，表头吸顶
东明之羞的博客
11-27 4969
element-plus，el-table表格进行吸顶，冻结表头，复制脚本文件，进行引用，快速实现。
vue element el-table表头吸顶实现详情（适用于表头无fixed属性使用）
weixin_53082364的博客
05-13 3596
el-table表头吸顶实现详情（适用于表头无fixed属性使用） 1、设置 ref=“tableSort” <el-table ref="tableSort" v-loading="listLoading" :data="list" border @selection-change="setSelectRows" @sort-change="sortChange" > 2、设置页面滚动
Element table 表头吸顶效果（适用于表头无fixed属性使用）
单飞吧的博客
11-24 2239
在 main.js 自定义 sticky 指令 Vue.directive('sticky', { // 指令的定义 inserted(el,binding) { // 获取表头 const dom = el.children[1] const dom2 = el.children[2] // 获取滚动元素 const scrollParent = document.querySelector(binding.value.parent) scrollP
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
你好！刘斩仙
04-15 4047
简介 1.表头吸顶效果 2.左侧列固定，右侧滑动，表头跟随内容滑动 3.行高自适应 番外 最近上海疫情，居家办公一月多了，愿阴霾散去。最近网上在正常得市民抱怨中，有很多别有用心之人，数典忘祖，造谣生事，其心可诛。 如图所示 源码（复制另存txt，修改.html直接运行） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati
element table表头固定悬浮，element table表头黏性布局，element table表头悬浮窗口
qingdi1的博客
12-03 2849
element table表头固定悬浮，element table表头黏性布局，element table表头悬浮窗口效果图图一图二图三图四修改方案代码scriptcss 效果图 图一 图二 图三 图四 修改方案 在不更改element 组件的东西，也不需要动原来的一行代码，一次写入，整个项目有效 代码 app.vue加入如下代码,整个项目的table表单都生效，注意使用如果有用请记得点赞 script mounted() { window.addEventListener( '
vue项目，表格长度过长，el-table 怎么加高度，使表头一直显示在页面上？
最新发布
06-21
我们正在使用ElementUI的el-table组件，并希望固定表头（即表头吸顶）同时调整表格高度，以解决表格内容过长时出现滚动条的问题。根据ElementUI文档，我们可以通过设置`height`属性来固定表头。当设置了`height`属性...
element table 表头吸顶
06-20
### 实现 Element UI Table 表头吸顶效果的解决方案 在使用 Element UI 的 `el-table` 组件时，若需要实现表头滚动吸顶的效果，可以参考以下几种方法。 #### 方法一：使用 CSS `position: sticky` 通过设置 CSS ...
vue中多路由表头吸顶实现的几种布局方式
10-17
主要介绍了vue项目多路由表头吸顶实现的几种布局方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
table实现表头固定，表身滚动效果
weixin_43939111的博客
01-29 923
在vue中有现成的element-ui有这种表格效果，但手头项目规定用原生js来写。用bootstrap发现没有像el-ui一样现成的表头固定表身滚动的处理方法，为了保留bootstrap好看的样式，只好把两个table拼接成一个来实现效果，后来发现其实对table及其子元素加特定的Css就能实现，以下是关键代码 #t-head,#t-body tr{ display:table; width:100%; table-layout: fixed; } #t-body{ display:block;
基于ElementUI的el-table二次开发，使表头自动吸顶（支持左右fixed）
qq_43526066的博客
02-16 1985
基于ElementUI的el-table二次开发，使表头自动吸顶（支持左右fixed）
ElementUI表格吸顶(sticky)
weixin_49645803的博客
09-12 1463
ElementUI表格吸顶(sticky)
elementUI table 表头吸顶效果
m0_66743830的博客
07-10 6316
elementUI table 表头吸顶效果
element-ui 表格el-table高度不是一个固定值时固定表头
lingliu0824的博客
01-05 5996
当height不是一个固定值时，如期望表格可以填充完页面剩余空间，并且固定表头时，可以通过给height属性赋值字符串形式实现。**1.使用一个单独的标签包裹el-table组件，父级组件使用flex纵向布局,父级的高度需要确定（通过固定px或者百分比或者其父级也是纵向flex布局，其设置flex:1来确定高度）/* 可以根据需要设置,也可以是百分比或者在父级flex布局中通过flex:1来确定高度 */height可以为数字或者字符串，当为一个数字时表示固定的高度，也可以为百分比等字符串。
解决 element-ui 的 el-table 自动吸顶（支持fixed，keep-alive的使用）
weixin_41308436的博客
03-01 5788
el-table不设定高度,同时表头固定顶部，吸附顶部
解决 element-ui 的 el-table 自动吸顶（支持fixed）
态度决定一切
09-22 9622
看了很多案例，从简单的角度，position:sticky，似乎是比较理想的选择，可是当el-table设置了fixed后，这里的fixed会失效。最后还是采用了js监听滚动的思路实现。 获取表格距离顶部的距离; 设置表格距离顶部多少就吸顶---offsetTop1; 获取滚动条滚动的距离; 当滚动条滚动了 offsetTop1 后，表格就自动吸顶;
element table 点击表头展开收起
m0_61504951的博客
02-02 780
思路：使用af-table-column自适应宽度 改变width。点击表头可以展开，宽度自适应，再次点击收起，宽度变小。3.1表格添加表头点击事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值