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

效果

  • 保证页面其他模块宽度高度自适应,动态改变中部 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;
  }
}
相关推荐
活宝小娜33 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点35 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow36 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
会发光的猪。4 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客4 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
周全全5 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ5 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六5 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保5 小时前
el-table 多选改成单选
javascript·vue.js·elementui