el-table组件的固定表头和高度自适应问题

最新推荐文章于 2026-04-10 17:12:46 发布
原创 最新推荐文章于 2026-04-10 17:12:46 发布 · 5.7k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#elementui
本文探讨了在Vue项目中遇到的表格高度超出和表头不固定的问题，提供了一种解决方案。通过在el-table外层设置高度并使用calc计算，以及利用el-table的props实现表头固定，确保只有数据区域滚动，同时表格高度能与分页条完美触底，保持整个表格在首屏显示。
该文章已生成可运行项目，

首先上问题图:

除了高度超出和没有内部滚动条之外,表头也没有固定直接滚动上去了,我想要的效果是表头固定只有数据滚动,table外面的layout盒子也不滚动,只是表格内容区滚动,并且表格高度刚好和分页条触底,整个表格都在首屏

目标效果图:

解决方法:

首先高度问题我们可以在el-table外面套一层盒子,高度用calc减去其它的高度给到这个盒子,然后el-table上加上一个props: height="100%" 即可

 

至于固定表头的做法就是写了height这个props就会自动固定,官方原话:

  

本文章已经生成可运行项目
页面使用弹性布局，使用elementUI的Table高度等于父盒子的100%时候，table出现上缩动画
weixin_45397914的博客
10-17 1277
    最近工作中有一个页面布局使用弹性布局，高度限定屏幕高度，使用elementUI的table时，因为想要他的高度等于其父盒子的高度的，所以table使用了height=100%;但是这是会发现其页面第一次出现，table的高度会出现一个向上缩的动画。要消除这种动画效果,通过查阅资料，这样的原因是因为高度height的100%没有绝对定义其相对元素是哪个，就会出现逐层向上寻找。要消除这种动画，在样式中使用position来决定其相对谁的高度。 eg: div{
vue实战指南 eltable表格表头自定义高度
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-06 2138
基本概念与作用说明el-table组件的作用表头自定义高度的意义示例一：通过CSS样式自定义表头高度示例二：通过scoped样式自定义表头高度示例三：通过行高属性自定义表头高度示例四：通过插槽自定义表头内容示例五：动态调整表头高度实际工作中使用的技巧响应式设计动画效果多语言支持性能优化在Vue项目中，el-table组件是Element UI库提供的一个强大的表格组件，广泛用于展示和操作数据。然而，默认情况下，el-table的表头高度是固定的，有时候我们需要根据实际需求自定义表头的高度。
el-table添加固定高度height后高度自适应
Gpointy的博客
10-27 2497
新建目录src/directive/el-table。
el-table固定高度，数据多出现滚动条，表头和内容对不齐
qq_48795482的博客
07-21 759
el-table固定高度，数据多出现滚动条，表头和内容对不齐。
Vue2中el-table修改表头高度和行高
最新发布
qq_31119443的博客
04-10 146
注意：v-deep .el-table th和v-deep .el-table tr的height会取最大值的一个。
table实现表头固定，表身滚动效果
weixin_43939111的博客
01-29 959
在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;
el-table设置固定高度
W8034的博客
04-27 5122
:row-class-name="'rowStyle'"//el-table标签里 :row-style="{ height: '48' }" //el-table标签里 /deep/ .admin-table .rowStyle { height: 48px; line-height: 48px; } /deep/ .admin-table .el-table td { padding: 0; }
el-table高度适配问题
程序猿GTC
05-22 2667
当多个tabs时，如果table高度，依赖性其父组件的高度，只有第一个tabs高度为实际值，其他tabs的高度为0，但mounted时，已经赋值给table,会导致其他tabs的table显示不出来。2 在tabs的子组件设置一个属性，外层的高度获取到后，通过属性传给子组件，子组件显示时，直接计算一下（减去其他部分的高度，一般就是底部查询或操作高度，底部分页高度）el-table不能自适应高度，必须给定具体的值，才能显示正常，同时在数据条数超过其高度时，table出现滚动条，而不是整个页面出现滚动条。
element-ui的表格组件el-table固定表头后，怎么实现表格高度的自适应呢？
guixin12345的博客
08-28 5914
element-ui的表格组件el-table固定表头，并且表格高度自适应。
ElementUI表格el-table表头固定自适应高度解决方案
web前端开发
01-06 1万+
来源 |https://wintc.top/article/54ElementUI、iView都以相同的方式提供了表格组件表头固定的方法，即设置组件的height属性。表头固定很重要，...
若依框架下el-table高度自适应终极指南：告别页面滚动，专注表格内容
wine的专栏
03-02 722
本文详细解析了在若依框架中实现el-table高度自适应的完整方案。通过动态计算视口高度、监听窗口与内部元素变化，并配合防抖优化，彻底解决表格撑开页面导致滚动混乱的问题，实现表格内部滚动，提升后台管理系统的操作效率和界面专业性。
el table 固定表头和首行_再谈table组件：固定表头和表列
weixin_36125445的博客
02-15 3098
前言Github原文：github.com/qiud...本文介绍内容包括：1. Element UI 实现表头表列固定思考与总结2. translate3d如何实现表头表列固定书承上文，在前文【Vue进阶】青铜选手，如何自研一套UI库中介绍了Vue组件库的开发细节，举例实现了button、table等组件的开发。在Ange这个UI库中，我实现了一个内容高可定制的表格组件：可固定表头和表列，内容则...
Element技能点--el-table固定表头且高度占满
热门推荐
编程副队长
01-18 2万+
el-table固定表头非常简单，只要给添加height属性即可。 <el-table height="250"></el-table> 如果想让表格占满当前高度，必要前提时让父元素的高度先撑满当前高度。 <div style="height:100%"> <el-table height="100%"></el-table> </div> 而有些情况下，设置height为100%只能保证固定表头，高度无法占满，此时可以尝试使用。
el-table设置固高
string佳佳的博客
08-01 3791
<el-table :data="tableData1" :height="550+'px'" style="width: 100%"> <el-table>
element表格固定高度
不同场景下的水平居中
07-16 2941
需求描述：表格内容多，不使用分页，只在表格内容区域滚动，去掉滚动条，去掉滚动条 复现及解决方法： 固定表格高度 .el-table { height: calc(100vh - 630px); } 出现滚动条： 去掉滚动条 // 隐藏el-table的滚动条 (表格固定高度时，会出现滚动条) /deep/.el-table .el-table__body-wrapper::-webkit-scrollbar { width: 0px; /* 宽度为0隐藏 */ } 出现问题： 1）右
el-table的高度自适应问题 el-table__body-wrapper的高度大于el-table__body
FE_lxy的博客
02-27 9850
el-table的高度自适应问题 el-table__body-wrapper的高度大于el-table__body的高度，导致表格最后一行后有留白，大致如下： 通过设置了表格外层的高度为当前的90%可以解决数据固定的表格问题 .el-table__body-wrapper { height: 90%!important; //具体百分比可以根据自身情况调整 } 但此法缺乏灵活性 当前表格有一个固定高度的显示区域，超出高度自动滚动，滚动时无此样式Bug所以无需处理，只需要对于表格行数不足
Vue -- 如何固定 el-table 的表格高度
支棱起来
12-22 6542
<div style="display:flex;position:relative;"> <el-table :data="infoTableData" cell-style="padding:6px" ref="infoTableData" border highlight-current-row> <el-table-column prop="resId" label="资源ID" align="left"></el-table-column>
element-ui el-table表格高度自适应
u014197593的博客
12-18 9857
vue包含一些官方指令，比如v-if、v-for、v-html、v-show等等。那如何创建一个属于自己的指令呢？自定义指令有两种，一种是全局的，一种是局部的，我这里只讲解全局的。
vue Table 表格自适应窗口高度，表头固定
先完成，再完美—60分比0分强100倍
03-05 970
vue 当表格内纵向内容过多时，可选择固定表头。
element table固定表头，表的高度自适应解决方法
sxmfendou的博客
03-31 3710
主要是通过在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应。 标签： <el-table ref="table" :data="tableData" :height="tableHeight"></el-table> vue中的ref解释 第一种JS处理方式： export default { data(){ ...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值