使用 flex 简单实现 table 自适应页面

效果

• 保证页面其他模块宽度高度自适应，动态改变中部 table 的高度

• 当页面整体宽度较小，顶部搜索模块高度自动撑开时，table 宽度动态变小，只展示 4 行数据。
  

• 当页面整体宽度较大，顶部搜索模块没那么高，table 高度自动变大，展示 7 行数据。
  

实现

• 利用 el-table 的固定表头的特性，设置 el-table 的高度为 100%
• 再利用 flex-grow 的特性，设置 el-table 的父盒子属性为 flex-frow: 1，自动分配空间内的剩余高度
• 关键代码

// 最外层根组件
.validateForm {
  height: 100%;
  display: flex;
  flex-direction: column;
  // el-table 的父盒子 - 设置 flex-grow，还需要设置一个最小高，表示该元素参与高度分配
  .table {
    min-height: 10px;
    flex-grow: 1;
  }
}