本文介绍了一位实习生成员在项目中遇到的Vue页面高度自适应问题，特别是使用Element UI布局时的高度实时自适应。通过在组件中绑定窗口高度，并监听窗口大小变化，实现了内容区域高度随浏览器高度动态调整，从而确保导航栏和内容区域的高度协调。文中还提供了具体的代码示例，展示了如何在表格和树形组件中应用这种方法。
本文章是我一个实习两个月的练习生，在项目中遇到的问题，在此记录，防治以后再踩坑！！
Element ui 本身使用的Container 布局容器，组件采用 flex 布局。所以用了它的布局就可以做到宽度实时自适应，当我想试试高度是否自适应时发现一个问题，它的高度无法实时自适应！
高度实时自适应这个问题让我研究了好久，因为我做的是一个后台管理系统左边是一个竖着的导航栏右边是内容，我左边导航栏的高度是根据右边内容高度来变化的，现在开始实现高度实时自适应！！
这是我项目的布局：
上代码！
Header
Aside
Main
复制代码
拿我的项目举个例子：我现在做的这个Main是一个带分页的大表格占满屏幕。
表格部分代码：
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
:height="table" //绑定固定表头高度
:style="tableheight" //绑定style高度
:header-cell-style="{background:'#eef1f6'}"
>
复制代码Script代码：
export default
最低0.47元/天 解锁文章
扫一扫
8428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
