使用 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;
  }
}
相关推荐
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
王王碎冰冰6 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼7 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安8 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
拜无忧8 小时前
html,svg,花海扩散效果
前端·css·svg
DevUI团队8 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好8 小时前
pinia从定义到运用
前端·vue.js
代码小学僧8 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜9 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥13 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js