一、前言
ElementUI、iView都以相同的方式提供了表格组件表头固定的方法，即设置组件的height属性。表头固定很重要，就在于当表格数据项很多时，滚动条出现在表格组件内，而不是出现在表格组件外——这样的优点在于，滚动浏览数据项时，表头不发生滚动而永远在可视区域，数据项的字段名可以一直看到。
el-table的height属性可以方便地实现表格固定，但是这个值该设置为多少以适配屏幕大小呢？设置过小，则可能出现可视区域内有空白位置，但是表格内却出现滚动条；设置过大，则在一些小屏幕设备上浏览时，页面本身和表格内部都可能会出现滚动条。两种情况体验都是极差的，为了解决这个问题，我们需要动态地计算页面空白区域的高度，然后设置到height属性，即根据页面大小，动态计算height属性。
这个问题难以抽象出通用的插件来解决，因为表格适合的高度在不同页面都不尽相同。本文使用的方案是，使用CSS和JS结合的方式，首先使用CSS规划出一个自适应高度的容器container，组件放到container的内部使用absolute绝对定位脱离文档流（如此table的高度不会影响到页面布局），然后使用JS获取container的高度tableHeight，将该值设置为el-table的height属性，从而实现表格自适应高度固定表头。
二、使用CSS规划自适应高度的容器container
这里所谓“自适应”，是指一个元素（往往是内容多少不固定）充分利用页面剩余空间来展示内容。使用CSS来做适应性布局，就是要减少在代码中出现数值类属性，充分地利用CSS各属性的特性让同一份代码在不同尺寸的设备中都能自由兼容呈现。最常用并且也最简单的一种适应性布局技巧是弹性布局，即flex布局。
下面是一个简单的例子，红色框是父容器，蓝色框是自适应高度的内容区域，该元素没有设置height属性，其高度自动适应为父元素高度减去“头部”的高度、padding、头部和“内容”之间的margin等。
<div class="container"><div class="header">不确定高度的头部</div><div class="content">自适应父元素剩余高度的内容</div></div>
用flex实现非常简单：
.container {display: flex; flex-direction: column;}.header {flex-shrink: 0; }.content {flex: auto; }.container {height: 300px;width: 250px;text-align: center;border: 1px solid red;padding: 10px;}.header {padding: 20px;border: 1px solid green;margin-bottom: 10px;}.content {border: 1px solid blue;}
前三条规则就是本例中的核心，对于container，通过display: flex声明它是一个flex盒子，flex-direction: column则表示flex弹性扩展方向是纵向；对于content，flex: auto表示该元素弹性扩张占满父元素剩余空间。
在使用表格呈现数据时，我们可以使用自适应布局的技巧，使得除去页面中的菜单、导航、各类按钮等占据的空间，表格刚好占满页面剩余空间，然后固定表头。以一个常规管理后台布局为例：
其中自适应区域我们用来放表格内容，其余各个部分都是固定的，在不同尺寸的设备中，自适应区域宽高自适应。只需要在CSS中重复使用display: flex设置容器为flex弹性容器、flex:auto使得某一部分占满父元素剩余空间即可。HTML和核心CSS代码如下：
1、html代码
<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="right flex-a flex-c"><div class="menu-list flex-s">表格菜单</div><div class="table-container flex-a" ref="container">自适应区域</div><div class="pagination flex-s">表格分页</div></div></div></div></body>
2、CSS代码
html {height: 100%;}body {height: 100%;margin: 0;}#app {height: 100%;text-align: center;}.flex, .flex-c {display: flex }.flex-c {flex-direction: column; }.flex-a {flex: auto; }.flex-s {flex-shrink: 0; }
二、动态计算表格高度
我们把表格插入到自适应区域，并将设置自适应区域为相对定位，表格容器设置为绝对定位：
html代码
<div class="table-container flex-a" ref="container"><div class="table-container-inner"><el-table:data="tableData":height="tableHeight"border></el-table></div></div>
css代码
.table-container {position: relative;}.table-container-inner {position: absolute;left: 0;right: 0;top: 0}
然后我们使用Element.getBoundingClientRect()这个接口来获取自适应区域的高度，设置为表格高度，这样即可达到自适应高度固定表头的效果
export default {data () {return {tableHeight: 0,tableData: [// xxx 表格数据]}},mounted () {this.calHeight()},methods: {calHeight () {this.$nextTick(() => {const rect = this.$refs.container.getBoundingClientRect()this.tableHeight = rect.height})}}}
当然，在用户操作的过程中，免不了会有一些影响页面布局的因素，此时我们需要重新计算一次高度。其中最常见的一种操作是改变浏览器窗口的大小，我们可以通过监听resize事件来重新计算高度：
data () {return {timer: 0}}mounted () {// ...window.addEventListener('resize', this.onResize)},beforeDestroy () {this.timer && clearTimeout(this.timer)Zwindow.removeEventListener('resize', this.onResize)},methods: {// ...onResize () {this.timer && clearTimeout(this.timer)this.timer = setTimeout(() => {this.calHeight()}, 500)}}
为了避免resize高频触发回调，这里使用定时器进行一个简单的控制。完整例子可以查看：/v56Kp/edit。
三、影响容器高度的其它因素
以上解决方案考虑了窗口resize对表格容器container高度的影响，这是绝大部分需要重新计算表格高度的情况。然而，其它一些情况也可能导致container高度变化，比如DOM增删或者是样式修改引发页面布局变动。如果想做得更完美，可以在引发这些操作的地方调用calHeight方法，或者使用MutationObserver观察到这些修改。
作者：MuMa
来源：沐码小站
链接：ElementUI表格el-table表头固定自适应高度解决方案 - 沐码小站
