alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案

一、前言

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)Z      window.removeEventListener('resize', this.onResize)
},
methods: {// ...onResize () {this.timer && clearTimeout(this.timer)this.timer = setTimeout(() => {this.calHeight()}, 500)}
}

为了避免resize高频触发回调，这里使用定时器进行一个简单的控制。完整例子可以查看：http://jsrun.net/v56Kp/edit。

三、影响容器高度的其它因素

以上解决方案考虑了窗口resize对表格容器container高度的影响，这是绝大部分需要重新计算表格高度的情况。然而，其它一些情况也可能导致container高度变化，比如DOM增删或者是样式修改引发页面布局变动。如果想做得更完美，可以在引发这些操作的地方调用calHeight方法，或者使用MutationObserver观察到这些修改。

作者：MuMa

来源：沐码小站

链接：ElementUI表格el-table表头固定自适应高度解决方案 - 沐码小站