Element技能点--el-table固定表头且高度占满

程序员大阳

已于 2022-05-01 23:31:28 修改

阅读量2.4w

点赞数 7

分类专栏： # 零基础Element # 前端文章标签： ElementUI 表格 el-table 固定表头高度占满

于 2021-01-18 13:37:28 首次发布

未经本人允许，请勿转载本人文章

本文链接：https://blog.csdn.net/woshisangsang/article/details/112776168

版权

61 篇文章

订阅专栏

26 篇文章

订阅专栏

本文介绍如何在 Element UI 中实现表格固定表头及高度控制的方法，包括使用百分比高度、视口高度单位 vh 和动态调整高度等技巧。

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

1. 固定表头

el-table固定表头非常简单，只要给添加height属性即可。

<el-table height="250"></el-table>

如果想让表格占满当前高度，必要前提是让父元素的高度先撑满当前高度。

<div style="height:100%">
	<el-table height="100%"></el-table>
</div>

而有些情况下，设置height为100%只能保证固定表头，高度无法占满，此时可以尝试使用。注意1vh表示可视区域的高度的1%，还是非常好用的。

<div style="height:100%">
	<el-table height="100vh"></el-table>
</div>

注意使用vh后，会发现虽然占满了，但是表头又无法固定了…

我太难了。。

最终还有一个方案，就是动态调整：

<div class="table-container">
	<el-table :height="elTableHeight "></el-table>
</div>

  mounted: function () {
    // 高度调整
    this.elTableHeight = $('.table-container').height();
  }

大功告成！