![3ad6e2cd4bc77230429a54715a474e50.png](https://i-blog.csdnimg.cn/blog_migrate/4cf0a0e132147994202a77e19f629b17.jpeg)
一、前言
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属性,其高度自动适应为父元素