vue项目前台带表格的页面,让表格根据屏幕大小自适应高度,小屏幕时不出现多个滚动条
参见馆藏库房系统,
右侧整体结构一般如下
<el-container class="ml10 mr10 br7 bgw">
<el-main> // el-main默认就是100%的高度,主要包括三个区域
1、上面筛选区域,一般为35px+10px的margin值
<el-form>
</el-form>
2、下面表格区域,表格区域的高,就是等于100% - (筛选区域的高 + 翻页区域的高(含magin值))
<div style= "height:calc(100% - 90px)">
<el-table height="100%"> //我们需要计算的就是table外层div的高,然后给table设置height="100%"即可,不需要减去表头的高度
</el-table>
</div>
3、翻页区域,一般为35px+10px的margin值 </el-main>
</el-container>
vue项目前台带表格的页面,让表格根据屏幕大小自适应高度,小屏幕时不出现多个滚动条的更多相关文章
- 在vue项目中添加一个html页面,开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
- 在vue项目中,解决如何在element表格中循环出图片列!
效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...
- vue项目中利用popstate处理页面返回操作
需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监 ...
- 如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页
最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了 ...
- 在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...
- Vue项目中设置每个单页面的标题
两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{ path: '/', name: ...
- Vue项目之IE下打开页面是空白
原因是:Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflect.Sym ...
- vue 项目build后部署上去页面空白
默认情况下vue-cli 会认为项目是部署在域名的根路径上. 但是当项目被部署到了一个子路径上,就要自己选定子路径. 比如项目被部署在了 https://www.ujapp.com/my-app, 则 ...
- vue 项目部署后 刷新一下 页面找不到 解决
1.修改配置router的参数 (效果不好) 2. (不能解决 出现403) 后端配置例子 Apache <IfModule mod_rewrite.c> RewriteEngine O ...
- 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
随机推荐
- A调用B方法,@Transactional事务问题
总结:方法A调用方法B:1.如果只有A加@Transactional注解:则AB在同一事务中,任意异常都回滚:2.如果只有B加@Transactional注解:AB方法为同一类,事务失效任意异常都不回 ...
- CF14D题解
CF14D Two Paths题解 题目链接 传送门 题意简述 给定一棵树,找出两条不经过相同点的最长路径,使得他们的长度乘积最大. 题目分析 首先,如果在一棵树上,两条路径没有共同的点,那么这两条路 ...
- 以MPU6050为例的硬件IIC的使用
目录 参考调试MPU6050与EEPROM的经验,整合了目标内存/寄存器地址是否为16位的情况,合并了单字节与多字节间的操作,添加了返回值与读写超时功能:硬件IIC的7位从机地址查询方式读写参考代码 ...
- Java中静态方法和实例方法
static修饰的方法可以直接用方法名. 访问 实例成员方法必须永实例成员调用
- lowcodeEngine 组件面板的拖拽功能
设计器和渲染器处在不同的 Frame 渲染器以单独的 iframe 嵌入,xxx-simulator-renderer 通过和 host进行通信来和设计器打交道,比如点击渲染画布任意一个位置,需要能计 ...
- CompletableFuture的thenCompose使用具体说明
1.thenCompose 如果你还没有了解CompletableFuture或者希望再次熟悉一下,可以参考 CompletableFuture使用方法详细说明 1.1. thenCompose的特点 ...
- lombok安装不了的问题
- vue3 门户网站搭建6-wangeditor
门户网站的新闻.公告等文章,内容可配置,故引入 wagneditor 1.安装: npm i wangeditor 2.方便调用,抽成组件: <template> <div ref= ...
- 四、vMotion虚拟机迁移
vMotion迁移步骤: 1.在目标主机上创建影子虚拟机. 2.通过vmotion网络将虚拟机的内存状态从源主机复制到目标主机.用户仍可以访问虚拟机,甚至有可能更新内存中的页面.源主机的内存位图会保存 ...
- C#消息泵探索(二)
引言: 上篇文章里简单的解释了C#的消息泵原理,这里我们以winform为例详细地了解一下实现代码. 底层实现 [DllImport(ExternDll.User32, ExactSpelling ...