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

2023-11-19

本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!!

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应 的相关文章

随机推荐

  • UE4命令行使用,解释

    命令行在外部 从命令行运行编辑项目 1 导航到您的 LauncherInstall VersionNumber Engine Binaries Win64 目录中 2 右键单击上 UE4Editor exe 的可执行文件 并选择创建快捷方式
  • vscode 中使用鼠标Ctrl+滚轮放大缩小

    1 使用鼠标Ctrl 滚轮放大缩小 打开 文件 gt 首选项 gt 设置 gt 用户 gt 下面的JSON 2 3 点击在settings json中编辑 4 添加下面一行 editor mouseWheelZoom true 5 最后保存
  • MachineLearningWu_15/P70-P71_AdamAndConv

    x 1 算法参数更新 我们使用梯度下降算法来自动更新参数 但是由于学习率的不好选择性 我们有时候会下降地很快 有时候下降地很慢 我们期望有一种方式能够自动调整学习率的变化 这里引入Adaptive Moment Estimation Ada
  • eclipse汉化方式(下载,安装,中英切换)

    按照下面的步骤完成Eclipse的汉化 对初学java的小伙伴们很有帮助哦 愿大家能够学习进步 eclipse汉化的两种方式 第一种方式 第二种方式 第一种方式 一 第一步准备工作 打开eclipse点击Help About eclipse
  • Unity 3D input.GetAxis用法

    input GetAxis 用法 GetAxis Mouse X GetAxis Mouse Y GetAxis Mouse ScrollWheel GetAxis Vertical GetAxis Horizontal GetAxis 是
  • 深度特征融合---高低层(多尺度)特征融合

    目录 概述 基本概念 典型方法概述 相关工作 多尺度模型设计 Deep Feature Fusion for VHR 高分辨率图像 Remote Sensing Scene Classification DCA特征融合方法 基于神经网络的目
  • session获取与存储

    方法一 首先要明白 session是在服务器端创建并保存在服务器端 当代码中创建session时会相应地创建sessionID保存在服务器端 同时服务器向浏览器响应信息时会以cookie形式 其实就是 JSESSION sessionID
  • 什么是Java?

    刚开始学习Java时 对于老师讲述的Java的发展历程毫无兴趣 觉得只要会用就行了 直到有一天我的朋友突然问我 你们学的Java是什么呀 面对他突如其来的问题 我一下有点不知所措 刚想开口却又不知道说些什么 只能慢慢的吐出那几个字 一门编程
  • IDEA 错误: 找不到或无法加载主类

    问题 问题就是spring boot项目在IDEA中 启动类右键运行 控制台提示 错误 找不到或无法加载主类 xxx xxx xxx xxxx 启动类包名 原因 问题原因 运行启动类的时候代码没有编译到target目录下如下图 发现编译过后
  • ubuntu16.04 安装 pcl1.7

    不使用源码编译的方式 而是使用官网prebuild版本的方式安装 sudo add apt repository ppa v launchpad jochen sprickerhof de pcl sudo apt get update s
  • python指定宽度20输出_Python 以指定宽度格式化输出

    Python 以指定宽度格式化输出 2020 05 07 当对一组数据输出的时候 我们有时需要输出以指定宽度 来使数据更清晰 1 mat 20 t 28 t 32 print mat format 占4个长度 占8个长度 占12长度 2 如
  • JS关于Object.assign()和浅拷贝、深拷贝

    什么是浅拷贝和深拷贝 js中存对象都是存地址的 浅拷贝指向的是同一块内存区块 深拷贝则是另外开辟了一块区域 两个例子 var obj1 num 100 str abc var obj2 obj1 obj2 num 200 console l
  • 图像处理神器 ImageMagick 命令介绍

    安装完 ImageMagick 打开命令行 输入相应命令即可处理图像 所有命令前面都要加 magick 网上的教程都没说 也可能是我自己环境没配置吧 说明 内的命令表示是可选的 内表示是示例或者代号而已 magick convert sou
  • 每日写题分享--机器人的运动范围//DFS深度优先搜索/递归

    题目描述 题目链接戳此 解题思路 这题和上题矩阵中的路径可以对比起来看 同样也是深度优先搜索 DFS 由于机器人从 0 0 位置向下向右探索 右边的下面和下面的右边可能会重复 所以可以将走过的路径记录下来置为true防止重复走 代码实现如下
  • 电脑一体机电脑,一体机电脑哪款好_一体机电脑品牌推荐【热门机型】-太平洋IT百科...

    一体机电脑哪款好 一体机电脑将主机部分和显示器部分高度集成在一起 因此一体机电脑被厂商称为All In One AIO电脑或屏式电脑 优秀的外观设计加上良好的硬件性能 一体机电脑成为很多家庭甚至是办公用户的选择 我们不妨从一体机电脑的背景开
  • PDF如何解密?介绍几个简单小方法

    PDF格式是我们常见的文件格式 平时学习或者工作的文件都是以PDF格式来发送的 一方面因为它不能随便进行编辑 一方面是因为它还可以设置加密 但是设置加密很简单 后续需要对加密文档进行修改编辑的时候就不简单了 每次打开都需要输入密码 操作步骤
  • pinia 实战IM----注册TIM-plugin插件

    目录 初始化TIM实例 定义参数类型 扩展pinia插件 添加新的属性 添加新的选项 标注插件类型 为新的定义选项添加类型 为新的 state 添加类型 初始化pinia TIM插件 扩展 pinia属性 与 选项 仓库中使用 pina中注
  • openGauss学习笔记-59 openGauss 数据库管理-相关概念介绍

    文章目录 openGauss学习笔记 59 openGauss 数据库管理 相关概念介绍 59 1 数据库 59 2 表空间 59 3 模式 59 4 用户和角色 59 5 事务管理 openGauss学习笔记 59 openGauss 数
  • PX4log文件分析工具

    功能介绍 该工具可读取PX4存储的bin文件 自动将其进行解析 解析后可根据需求 选择需要导出的数据 将数据导出到txt文件中 几点说明 应用场景 需要将飞行数据导入到matlab中 对数据进行分析 使用原始的sdlog2pumy py文件
  • vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应

    本文章是我一个实习两个月的练习生 在项目中遇到的问题 在此记录 防治以后再踩坑 Element ui 本身使用的Container 布局容器 组件采用 flex 布局 所以用了它的布局就可以做到宽度实时自适应 当我想试试高度是否自适应时发现