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. vue 自定义指令input表单的数据验证

    一.代码 <template> <div class="check" > <h3>{{msg}}</h3> <div clas ...

  2. django-rest-framework-jwt的使用

    一简介 JWT 是一个开放标准(RFC 7519),它定义了一种用于简洁,自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法.该信息可以被验证和信任,因为它是数字签名的.JWTS可以使 ...

  3. JS全局函数里面的一些区别

  4. 解决MySQL登录ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor)问题

    问题描述 今天在MAC上安装完MySQL后,MYSQL默认给分配了一个默认密码,但当自己在终端上使用默认密码登录的时候,总会提示一个授权失败的错误:Access denied for user ‘ro ...

  5. 一个四五年的Java开发程序员,该准备哪些去面试?

    上周面试了一周,感触颇深,总结一下. 面试了公司大概有阿里,携程,爱奇艺,唯品会,途牛,bilibili,大众点评,阿里和爱奇艺是电话面试,其他现场面试. 首先,五年左右,应该算高级开发工程师,大部分 ...

  6. centos7 yum 安装tomcat7

    查看yum中tomcat信息 yum info tomcat 安装 yum install tomcat 安装管理界面 yum install tomcat-webapps tomcat-admin- ...

  7. STL容器-deque-双端队列

    注明:全部来自转载,供自己学习与复习使用 deque双向开口可进可出的容器 我们知道连续内存的容器不能随意扩充,因为这样容易扩充别人那去 deque却可以,它创造了内存连续的假象. 其实deque由一 ...

  8. windows下bat批量处理启动exe

    新建文本文档,start.dat start "" "D:\QQ\anzhaung\Bin\QQ.exe" 启动QQ cd ./当前文件夹下,../上一文件夹下 ...

  9. php表单 - 验证邮件和URL

    PHP - 验证名称 以下代码将通过简单的方式来检测 name 字段是否包含字母和空格,如果 name 字段值不合法,将输出错误信息: $name = test_input($_POST[" ...

  10. vue 获取当前元素

    获取当前元素 Html: <li><a href="#" v-on:click="typeStyle">萨克斯萨克<span> ...