上一篇文章讲了修改el-table列表的滚动条样式，今天来说一下表格高度自适应。
比如默认展示20条数据时，表格高度可能会超出当前页面的高度，此时页面会出现滚动条，我们往下拖动的时候表格下方的数据是可以呈现出来，但表头可能就被页面遮挡住了。那往下拖动时怎么固定住表头呢？Element文档里有介绍，可以加height属性。
比如：
<el-table :data="tbData" stripe border height="500"></el-table>
给height一个高度，这样是可以解决表头固定的问题。但是又会出现一个问题，就是不同的电脑分辨率是不一样的，500px在小分辨屏幕可能是可以的，但是大屏幕上就很不合适了。所以我们要给这个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>
