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

最新推荐文章于 2025-03-05 17:48:48 发布
最新推荐文章于 2025-03-05 17:48:48 发布
阅读量5.2k 收藏 7
点赞数 3
分类专栏： vue 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Suk__/article/details/124069754
版权
本文探讨了在Vue项目中遇到的表格高度超出和表头不固定的问题，提供了一种解决方案。通过在el-table外层设置高度并使用calc计算，以及利用el-table的props实现表头固定，确保只有数据区域滚动，同时表格高度能与分页条完美触底，保持整个表格在首屏显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先上问题图:

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

目标效果图:

解决方法:

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

 

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

  

ElementUI表格el-table表头固定自适应高度解决方案
HDD_lf的博客
01-17 3825
el-table header固定body高度自适应并滚动 elementui官方给出的header固定body滚动方案仅需给height属性赋值，但当我们遇到并不能写死height的情况，或许你会抛弃height，通过css使整个表格高度自适应并滚动，但表头也会被滚上去，就很不优雅。这时你可能会想到通过:show-header="false"隐藏表头并在上方另写一表通过配置css仅显示该表的表头，曲线救国，实现表头固定表体高度自适应并滚动（实际上，这是我 灵机一动 想到的，也确实这么做了，也不是不行，就是
elmentUI el-table页面高度自适应
qq_40603125的博客
06-06 985
表格太高很不方便视口高度。
elementUI Table组件实现表头吸顶效果
m0_58352785的博客
01-21 812
当 table 内容过多的时候，页面上滑滚动，表头的信息也会随着被遮挡，无法将表头信息和表格内容对应起来，需要进行表头吸顶。注册指令 directives/sticky-header.js。❗️❗️❗️父元素不要有 overflow: hidden;环境：vue2.6+、element UI。main.js 引入。
vue Table 表格自适应窗口高度，表头固定
最新发布
先完成，再完美—60分比0分强100倍
03-05 639
vue 当表格内纵向内容过多时，可选择固定表头。
element-ui的表格组件el-table固定表头后，怎么实现表格高度的自适应呢？
guixin12345的博客
08-28 5715
element-ui的表格组件el-table固定表头，并且表格高度自适应。
ElementUI的el-table固定表头高度自适应
合肥阿花的博客
12-01 2298
1.表格设置:height="tableHeight" <el-row class="tablediv" ref="tableContainer"> <el-col :span="24"> <el-table :data="tableData" highlight-current-row border :height="tableHeight"> <el-table-column type="index" label="序号" width..
element table 表头固定,表格高度自适应
weixin_42342065的博客
12-15 840
element table 表头固定,表格高度自适应
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI为el-table元素提供了直接设置高度（height）属性的方法，从而固定表头并实现内容的滚动。在本文中，将会详细探讨如何实现这一功能，并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI...
Vue2+Element-ui实现el-table表格自适应高度
cnsv的博客
06-12 1162
vue2+elementUI table表格自适应页面高度
el-table不使用height自适应高度 表头固定
MR.杜的博客
05-31 1898
【代码】el-table不使用height自适应高度 表头固定。
[element-ui] 表格el-table表头固定自适应高度解决方案
qq_14993591的博客
04-02 3883
flex布局 <body> <div id="app" class="flex-c"> <div class="header flex-s">头部导航</div> <div class="content flex-a flex"> <div class="left flex-s">左部菜单</div> <div class="ri.
element table固定表头，表的高度自适应解决方法
默默的小跟班的博客
12-11 1698
主要是通过在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应。 标签： <el-table ref="table" :data="tableData" :height="tableHeight"></el-table> vue中的ref解释 第一种JS处理方式： export default { data(){ return { tableHeight: 50, tableData
el-table固定列显示问题-固定列高度与表格高度不一致
梁白开的博客
12-12 1848
设置固定列，即表示在原表格的基础上渲染出新的fixedtable来展示固定列，这两个table一定程度上是重合的，fixedtable在原table上，fixedtable 通过 只渲染 我们选为 固定列的 列。原table与fixedtable高度问题，由下图可知原table高度为630px，两个固定列fixedtable高度为612px，从而导致了高度不一致问题。在使用el-table过程中，设置了左右两个固定列，由于未指定表格高度，故而导致以下问题。固定列表尾高度与表格高度不一致问题。
关于vue使用elementui的table固定表头后导则的高度留白问题
weixin_56851151的博客
11-14 712
在elementui使用table表格的height过程中，height设置了一个固定的高，如果当数据量足够时（超出这个给定的固定高度），能够正常的出现滚动条没问题，但是当数据量过小时（渲染出来的列表没盛满这个给定的高度），会导则高度有一部分的留白。居然固定高度不行，那就设置成最大高度，这样数据量少的时候就不会出现高度空白问题。ps:最主要的无非就是将:height改成:max-height。2）、 监听screenHeight从而改变table的高度。1、首先是最重要的高度留白问题。
解决el-table设置固定高度后，展示不同列时表格高度变小bug
DZQ1223的博客
04-03 1510
究其原因可知是el-table列动态发生变化后，el-table__body-wrapper的高度变小了。在更新表格数据后对el-table进行重载。
el table 固定表头和首行_element table固定表头，表的高度自适应解决方法
weixin_39757040的博客
12-22 1370
主要是通过在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应。标签：第一种JS处理方式：export default {data(){return {tableHeight: 50,tableData: []}},mounted:function(){setTimeout(() => {this.tableHeight = window.innerHeight ...
el-table设置固高
string佳佳的博客
08-01 3719
<el-table :data="tableData1" :height="550+'px'" style="width: 100%"> <el-table>
el-table设置固定高度
W8034的博客
04-27 4906
: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; }
ant design 自适应高度表格_element Table组件固定表头且高度自适应
05-30
2. 在模板中使用Table组件，并设置表格高度和固定表头： ``` <el-table :data="tableData" style="width: 100%; height: 100%;" :height="tableHeight" :max-height="maxHeight" v-loading="loading" ...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值