做企业策划的公司_海外网络推广收费_优化设计五年级下册语文答案_把百度网址大全设为首页

效果

• 保证页面其他模块宽度高度自适应，动态改变中部 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;}
}