vue2 - 详细实现elementUI el-table 将表格布局自适应撑满页面高度（布局优化）

前言

当在做PC端管理系统的时候，总是绕不开表格。当表格单页数据比较多或者过少时，要么不铺满全屏，要么分页顶的看不到。如何不想当前页面的分页按钮还要靠鼠标滚动才能展示出来？网上有一些解决方法就是通过屏幕高度减去查询表格的高度去计算高度赋值表格,但直接用css会更便捷很多。

本文提供了完美便捷的解决方案，保证100%解决 

布局如下，app-connainer一般就是放的我们的 <router-view/> ,这里以此为例子。

思路

首先设置app-connainer的高度为 calc(100%-84px)，然后利用flex纵向排列,将筛选条件main-1和分页main-3分别放在顶部和底部，中间table部分main-2自适应。核心就是 main-2作为el-table的父元素，父元素flex:1，子元素高度设置为100%即可! 。

主要代码