使用 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;
}
}
