效果
-
保证页面其他模块宽度高度自适应,动态改变中部 table 的高度
-
当页面整体宽度较小,顶部搜索模块高度自动撑开时,table 宽度动态变小,只展示 4 行数据。
-
当页面整体宽度较大,顶部搜索模块没那么高,table 高度自动变大,展示 7 行数据。
实现
- 利用 el-table 的固定表头的特性,设置 el-table 的高度为 100%
- 再利用 flex-grow 的特性,设置 el-table 的父盒子属性为 flex-frow: 1,自动分配空间内的剩余高度
- 关键代码
css
// 最外层根组件
.validateForm {
height: 100%;
display: flex;
flex-direction: column;
// el-table 的父盒子 - 设置 flex-grow,还需要设置一个最小高,表示该元素参与高度分配
.table {
min-height: 10px;
flex-grow: 1;
}
}