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 {

data() {

return {

tableheight:{height:'',}, //表格高度

table:window.innerHeight - 180 //固定表头高度

}

methods: {

getHeight(){

this.tableheight.height=window.innerHeight-68+'px'; //获取浏览器高度减去顶部导航栏

}

created() {

window.addEventListener('resize', this.getHeight);

this.getHeight()

}

destroyed(){

window.removeEventListener('resize', this.getHeight);

}

复制代码

这里大家会看到为什么还要绑定固定表头的高度呢，那是因为当你拖动浏览器高度的时候如果不固定表头高度就会发现你看到的数据不完整，下面的数据就会被盖住。这时候有人问了，如果高度不是绑定的呢？如果高度不绑定通过计算那就是一个固定的高度无法实现自适应。所以固定表头绑定高度至关重要！！！

完成！！！

虽然这是一个表格的示例，但是我觉得其它的应该也可以适用，因为我的项目中右边还有一个是一个大tree占满浏览器，用同样的方法也是可以实现的。

网上有一种element ui 表格自适应高度的方法是：

这种实现表格自适应不是实时的如果你改变了屏幕的高度需要手动刷新页面才能达到适应屏幕的效果。

问题解决啦~~希望大家遇到和我同样的问题时，这篇文章能帮你解决问题，如果我哪里讲的不清楚欢迎留言，如果有更好的方法也欢迎讨论，喜欢的点赞哟ヾ(◍°∇°◍)ﾉﾞ

vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应相关推荐

vue页面自适应屏幕宽高_Vue 实现大屏页面的屏幕自适应
1. 在配置文件设置大屏设计的尺寸1920*1080 //appConfig.js export default{ screen:{ width:1920, height:1080, scale:20 ...
vue页面自适应屏幕宽高_vue组件页面高度根据屏幕大小自适应
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
andorid最新的不规则色彩背景图片自适应屏幕宽高,背景不变形
先在这里吐槽一下万恶的客户改需求... 再说一句...网上大部份资料都是坑爹的.因为不是针对你需求来写的....别照抄..你只能从多种答案中总结出自己的代码.自己的方法所谓不规则背景图片是指色彩不同 ...
H5页面获取屏幕宽高
document.documentElement.clientWidth; 宽度 document.documentElement.clientHeight; 高度用 window.screen.h ...
vue项目登录页背景图百分百铺满屏幕宽高自适应
vue项目背景图百分百铺满屏幕宽高自适应 .login{background: url(../../../static/img/login/beijing@2x.png);background-siz ...
vue封装的全屏js 禁止键盘事件获取当前浏览器类型获取当前的屏幕宽高
开启全屏 export function fullScreen(){var el = document.documentElement,rfs = el.requestFullScreen || el ...
Flutter使用ScreenUtil获取屏幕宽高初始化报错
报错如下原因我们在布局中使用ScreenUtil().screenWidth获取屏幕宽度是,在初始化未装载视图时,第一次获取时拿不到,会出现如上的崩溃. 解决方案 import 'package: ...
uniapp微信小程序获取屏幕宽高
uniapp开发微信小程序的时候,有时候去调整样式你需要适配各种手机屏幕,使用,你的样式宽高就不能使用rpx 有的朋友觉得可以使用vw vh % 是的,当然可以但是要让你的元素,宽高,比如 ...
代码 - 多张图片合并成PDF（每页宽高即是当前页面图片的宽高）- itextpdf
文章目录 1. 多张图片转成PDF(每页PDF的宽高是当前页面图片的宽高) 7.2.3版本官方示例多图合并成PDF 1. 多张图片转成PDF(每页PDF的宽高是当前页面图片的宽高) 7.2.3 ...

vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应

vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应相关推荐

最新文章

热门文章