参见馆藏库房系统,

右侧整体结构一般如下

<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项目前台带表格的页面,让表格根据屏幕大小自适应高度,小屏幕时不出现多个滚动条的更多相关文章

  1. 在vue项目中添加一个html页面,开启本地服务器

    在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

  2. 在vue项目中,解决如何在element表格中循环出图片列!

    效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...

  3. vue项目中利用popstate处理页面返回操作

    需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监 ...

  4. 如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页

    最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了 ...

  5. 在Vue项目中使用html2canvas生成页面截图并上传

    使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...

  6. Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{     path: '/',     name: ...

  7. Vue项目之IE下打开页面是空白

    原因是:Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflect.Sym ...

  8. vue 项目build后部署上去页面空白

    默认情况下vue-cli 会认为项目是部署在域名的根路径上. 但是当项目被部署到了一个子路径上,就要自己选定子路径. 比如项目被部署在了 https://www.ujapp.com/my-app, 则 ...

  9. vue 项目部署后 刷新一下 页面找不到 解决

    1.修改配置router的参数  (效果不好) 2. (不能解决 出现403) 后端配置例子 Apache <IfModule mod_rewrite.c> RewriteEngine O ...

  10. 简单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 ...

随机推荐

  1. python代码编译总结-用于代码加密

    基于一个自废武功式的决定,服务需要做成标准件在客户服务器上运行,因此调研了python代码加密的相关内容.py的代码混淆没有被采用,而是采用cython编译成二进制文件进而掩盖源码的方式对代码加密. ...

  2. Intel与AMD之间的故事

    本人中文作文水平仅仅达到小学一年级,通俗易懂,不会术语,对于外行人特别友好,内行人不吝赐教,多谢指正! 背景:Intel(CPU制造商大哥),AMD(二哥,yes) 诺伊斯(Intel创始人,集成电路 ...

  3. Mac OS 如何批量转换图片格式

    ​ 在苹果电脑中,如何快速批量地转换图片的格式.苹果电脑的预览程序,可以实现PNG.JPEG.JPEG-2000.PDF.TIFF格式之间的互换.这里以将PNG格式转换为JPEG格式为例. 工具/原料 ...

  4. JavaSE——遍历字符串与统计字符个数

    package com.zhao.stringtest; import java.util.Scanner; public class test2 { //键盘录入一个字符串,统计该字符串中大写字母, ...

  5. java短链接生成二维码

    import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import com.google.zxi ...

  6. 083_SFDC Limit(二) 及良好的开发习惯

    关于常见开发中遇到的limit,应如何处理:https://developer.salesforce.com/page/Apex_Code_Best_Practices 链接内容很好,就不一一做解释 ...

  7. go简单写个ini配置文件读取工具

    直接上代码: 1 package main 2 3 import ( 4 "fmt" 5 "io/ioutil" 6 "reflect" 7 ...

  8. win10家庭版升级为专业版

    1.选择此电脑点击属性 2.点击更改产品密匙 3.输入产品密匙 4N7JM-CV98F-WY9XX-9D8CF-369TT下一步等待升级重启即可.

  9. 【安全记录】certutil实战使用总结

    前言 在先知看到一篇关于certutil命令的文章(关于certutil的探究),讲得很详细.很全面.特此记录下本人在渗透时使用certutil的一些方法. 在cmd下使用certutil下载远程文件 ...

  10. 对PTA题目集1~3的总结

    一.作业总结 这几次的PTA作业主要考察我们对Java语言中的字符串的输入和输出.转换.有关它们的方法的运用和相关的一些运算,还有我们对题目需求的了解和书写代码的规范:其次还有强化我们对"类 ...