Element表格高度根据浏览器窗口大小动态改变

`el-table`默认展示20条数据时，表格高度可能会超出当前页面的高度，此时页面会出现滚动条，我们往下拖动的时候表格下方的数据是可以呈现出来，但表头可能就被页面遮挡住了。那往下拖动时怎么固定住表头呢？Element文档里说了，可以加`height`属性。

比如：

<el-table  :data="tbData" stripe border height="500"></el-table>

给`height`一个高度，这样是可以解决表头固定的问题。但是又会出现一个问题，就是不同的电脑分辨率是不一样的，500高度在小分辨屏幕可能是可以的，但是大屏幕上就很不合适了。所以我们要给这个`height`一个动态的值。

我们在`data`里定义一个`tableHeight`，在`mounted`生命周期函数里添加一个方法：

// 监听浏览器窗口变化，动态计算表格高度，
// 225是表格外其它布局占的高度，这个数值根据自己实际情况修改
window.addEventListener('resize', () => {
	this.tableHeight = window.innerHeight - 225
})

然后将`tableHeight`绑定到`height`属性。

<el-table  :data="tbData" stripe border :height="tableHeight"></el-table>

这样表格高度就能随屏幕大小自适应了。

但是还有一个问题，比如最后一页的数据不满20条时，表格的高度仍然是20条数据时的高度，下面就会留出一大片空白，很不雅观。

解决方法也很简单，将`height`属性换成`max-height`即可。

<el-table  :data="tbData" stripe border :max-height="tableHeight"></el-table>

有时还需要和固定列配合，固定列高度设置：

::v-deep .el-table__fixed-right {
	right: 0 !important;
	height: 100% !important;
}