vue3 element-plus flex布局 el-table表格高度自适应（设置百分比高度失效），超出显示滚动条大屏

原创已于 2025-06-20 14:41:33 修改 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui #数据可视化 #大屏端 #css

于 2025-04-22 10:47:04 首次发布

问题：子元素百分比高度失效

原因分析：

子元素设置百分比高度是基于父容器的显式高度计算的。

而在 Flex 布局中，父容器通过 flex: 1; 动态分配高度时，其高度属于隐式高度。（可以理解为父容器高度此时受子元素影响）

此时，子元素的百分比高度将因无法获取确定的父级高度参考值而失效，导致子元素高度回退为内容高度，即子元素高度会由其内容决定。若子元素内容过长，就会撑开父容器高度，进而破坏页面整体布局。

解决方法：

<div style="display: flex;flex-direction: column;height: 100%;width: 100%;">
    <div class="table_container" style="flex: 1;position: relative;">
        <el-table :data="xxx" border style="position:absolute;height: 100%;">
        </el-table>
    </div>
</div>

重点：

1. 在 el-table 外套一个 表格外部容器div。

2. 保证 el-table 外的每一层的高度都是 100% 或者 flex: 1 。（总之就是要确认表格外的每一层高度都是正确占满的，可以先把 el-table 注释掉，按f12一层一层去检查）

3. ！！子绝父相！！ 这个是实现的关键，就是子元素设置position:absolute; 父元素设置position: relative; 。

子元素绝对定位能够脱离文档流，避免影响父容器的布局和尺寸计算。此时，子元素就可以获取到确定的父级高度参考值，使得百分比高度生效。

子元素还需设置 overflow: auto; 实现内容超出时自动显示滚动条的效果。

（所以在这里就是 el-table 样式设置为 position:absolute;height: 100%; 表格外部容器 样式设置为 flex: 1;position: relative; ）