使用 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;
  }
}
相关推荐
貂蝉空大3 分钟前
vue el-table组件实现展开行 默认展开全部
javascript·vue.js·element-plus
猫猫村晨总6 分钟前
涉及到行合并的el-table表格导出功能实现
前端·vue.js·element plus
晨旭缘18 分钟前
vue3动态监听div高度案例
vue.js·html
VillanelleS22 分钟前
Vue2进阶之Vue3高级用法
前端·javascript·vue.js
qq22951165021 小时前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app
霍格沃兹测试开发学社测试人社区1 小时前
软件测试学习笔记丨Vue学习笔记-基本介绍
软件测试·vue.js·笔记·测试开发·学习
重生之我是菜鸡程序员2 小时前
uniapp 使用vue/pwa
javascript·vue.js·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】2、Vue 组件化编程
前端·javascript·vue.js
正小安2 小时前
Vue 3 性能提升与 Vue 2 的比较 - 2024最新版前端秋招面试短期突击面试题【100道】
前端·vue.js·面试