使用 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;
  }
}
相关推荐
梦6505 分钟前
CSS新特性
css
星语卿1 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11251 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_2 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
槿泽2 小时前
Vue集成Electron目前最新版本
前端·vue.js·electron
用户31506327304872 小时前
使用 vue-virtual-scroller 实现高性能传输列表功能总结
javascript·vue.js
paopaokaka_luck2 小时前
绿色环保活动平台(AI问答、WebSocket即时通讯、协同过滤算法、Echarts图形化分析)
java·网络·vue.js·spring boot·websocket·网络协议·架构
老华带你飞3 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
小熊学Java4 小时前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端