Vue. 之 Element table 高度自适应

  使用vue创建table后,其高度自适应浏览器高度.

  在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight)

         <el-table
:data="tableData"
:height="tableHeight"
border
style="width: 100%">

  

  在script中的data() 中添加高度的定义:

  这里的200是自己根据实际需求进行定义的,此处的200是因为该table上方有个form表单,减去form表单的高度(200)

 data() {
return {
tableHeight: window.innerHeight - 200,
4        }
5 }

Vue. 之 Element table 高度自适应的更多相关文章

  1. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  2. vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

    <template>   <div class="card-index pt-relative">     <div id="wrapper ...

  3. element el-table表格的vue组件二次封装(附表格高度自适应)

    基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多 ...

  4. element table固定表头,表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  5. 实用小工具不定期合集(textarea 高度自适应、自动计算Y轴刻度、json转table)

    1.textarea高度自适应 这个非常有用,但是网上的解决方案都不尽人意,话不多说,上代码. function auto (elem) { var minHeight = 30 var change ...

  6. autoHeight.vue 高度自适应

    autoHeight.vue 高度自适应 <!-- * @description 自适应高度 * @fileName autoHeight.vue * @author 彭成刚 * @date 2 ...

  7. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  8. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  9. JS跨域解决iframe高度自适应(IE8/Firefox/Chrome适用)

    参考园友的js跨越实现,有提到三种方式: 1. 中间页代理方式,利用iframe的location.hash 参见:http://www.5icool.org/a/201203/a1129.html ...

随机推荐

  1. 0906NOIP模拟测试赛后总结

    我进前十辣.然而有10个大佬去学LCT了于是没有考试. Dybala神和exzkt神分-rank1,奶风神和林哥分-rank3,wc.miemeng和DuanYue神140分-rank5. 我.ooo ...

  2. MFC 使程序不在任务栏显示

    在OnInitDialog()中直接修改窗口风格: // 让本程序不在任务栏显示(创建一个工具条窗口) ModifyStyleEx(WS_EX_APPWINDOW,WS_EX_TOOLWINDOW);

  3. form表单简易注册登陆

    注册页面: html <form action="updata.php" method="post" id="text_form"&g ...

  4. php中$_REQUEST、 $_GET、 $_POST、 $_COOKIE 的关系和区别

    看到REQUEST可以通吃GET .POST .COOKIE 后 感觉这个$_REQUEST太强大了是不是其他的几个超级变量就没有用了,下面对他们整体做个比较: 1.安全性 post>get 2 ...

  5. lvs + keepalived + nginx + tomcat高可用负载反向代理服务器配置(一) 简介

    一. 为什么这样构架 1. 系统高可用性 2. 系统可扩展性 3. 负载均衡能力 LVS+keepalived能很好的实现以上的要求,keepalived提供健康检查,故障转移,提高系统的可用性!采用 ...

  6. Python学习day04 - Python基础(2)数据类型基础

    <!doctype html>day04 - 博客 figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { ...

  7. linux 备份最近一天的文件

    #!/bin/bash #备份在最近一天修改的文件 #date 获取日期 +%Y-%m-%d 设置日期格式为yyyy-mm-dd的形式 BACKFILE=backup-$(date +%Y-%m-%d ...

  8. mysql TIMESTAMP 不能为NULL

    一般建表时候,创建时间用datetime,更新时间用timestamp.这是非常重要的. 我测试了一下,如果你的表中有两个timestamp字段,只要你更新任何非timestamp字段的值,则第一个t ...

  9. C开发系列-函数

    概述 任何一个C语言程序都是有一个或多个程序段(小程序构成).每个程序都有自己的功能,我们一般称这些程序段为"函数". 函数的执行过程 #import <Foundation ...

  10. 常用有三种json解析jackson、fastjson、gson。

    jackson依赖包 <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -- ...