Bootstrap

vue页面自适应屏幕宽高_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

;