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 ...
随机推荐
- 谷歌浏览器console.log打印失效问题
什么都没干,谷歌浏览器console.log就失效了,百度说如下图就能打印了,该勾选的勾选了,就是打印无效 后来发现是眼睛边上的那个输入框将打印的内容给过滤掉了,将输入框中的内容删掉就好了 Filte ...
- 【面试题】ES6语法五之箭头函数
ES6特性=>. function foo(x, y){ return x + y } var foo = (x, y) => x + y 包括一个参数列表(零个或多个参数,如果参数不是一 ...
- Vue 项目中实现的微信、微博、QQ空间分享功能(亲测有效)
需求:文章添加分享功能(包括微信.微博.QQ空间) 如下图所示: 点击图标分别跳转到如下界面:(实现效果如下) 话不多说直接代码(可以封装成组件) <template> <div c ...
- VsCode轻松使用docker容器-Remote Containers
VsCode轻松使用docker容器-Remote Containers 演示视频:BiliBili 使用docker容器过程中,最常见的操作是进入容器内查看文件.修改配置等操作 以前 使用shell ...
- Appium+RobotFrameWork测试环境搭建
前提:搭建好robotframework环境 RF基于python2.7的版本实现的一套开源自动化测试框架 推荐使用Appium Desktop, 搭建Appium环境: 1. 搭建JDK 2. 搭建 ...
- 微信小程序的this在success函数中使用
在绝大多数情况下,函数的调用方式决定了this的值.this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同. 在微信小程序中 我就遇到的一些问题 requestName: fun ...
- kubeadm安装
目录: 环境准备 所有节点安装docker 部署K8s集群 部署Dashboard 安装Harbor私有仓库 安装 master(2C/4G,cpu核心数要求大于2) 192.168.63.100 d ...
- argocd
argocd Argo CD - Declarative GitOps CD for Kubernetes (argo-cd.readthedocs.io) What Is Argo CD Argo ...
- mysql常用语句操作
概述: 1.通过表结构介绍.来操作mysql常用的语法&语句: 2.现在学习下几个基本的sql语句,万变不离其宗,把基础弄扎实了其它的就很容易了 一.表结构&建表: 1.学生基础信息表 ...
- 【git】2.3查看提交历史
资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E6%9F%A5%E7%9C%8B%E6%8F%90%E4%BA%A4% ...