element-ui的表格组件el-table固定表头，需要设置height，官方文档就是这样规定的（如下图），那么height写什么数值呢？

如果height写一个固定的数值，那这样会出现一个风险，就是在不同的屏幕尺寸设备，表现的效果也是不一样的，会出现非常难看的情况，这样肯定是不理想的。网上的解决方案五花八门，而且还不一定能实现。面对这样的问题，我写下这篇文章。

我们常见的后台管理系统大概是长这个样的（如下图），下面我将以这个此图来演示问题。可见，表格是在内容区的。目前，要实现表头固定，并且表格高度自适应，针对这个问题，总结出以下2种方案。

方案一：使用css的方式实现

给height设置为calc(100vh - X )，X是什么呢？其实就是顶部导航栏的高度

方案二：使用js的方式实现

关键代码，如下

export default {data() {return {height: 0,}},mounted(){this.autoHeight()},methods: {// 高度自适应autoHeight() {// 初始化的时候，设置高度this.setHeight()// 改变浏览器窗口大小的时候，设置高度window.addEventListener('resize', () => {this.setHeight()})},// 设置高度setHeight() {this.$nextTick(() => {this.height = innerHeight - X // 这里的X就是顶部栏的高度})}}}

特别说明

关于X的值，需要你根据您实际情况来计算。我上面图片的举例场景：X 就是顶部导航栏高度。可能你的场景。X 除了顶部导航栏高度，还有加上别的高度，要灵活运用。

希望本篇文章对你有帮助，如果你有更好的解决方案，欢迎留言评论！