element-ui的表格组件el-table固定表头后，怎么实现表格高度的自适应呢？

        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 除了顶部导航栏高度，还有加上别的高度，要灵活运用。

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