VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法


Posted in Javascript onNovember 28, 2018

在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的:

只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码。

然后直接上template代码:

<template>
 <el-table
  :data="tableData3"
  height="250"
  border
  style="width: 100%">
  <el-table-column
   prop="date"
   label="日期"
   width="180">
  </el-table-column>
 </el-table>
</template>

其中height="250"是固定值,我们可以在data中设置一个tableHeight,其中x是根据你布局自己算出来的值,也可以换成动态监测的值,就是父级到body的值,这个可以自行添加

data(){
 return{
  tableHeight: window.innerHeight - x
 }
}

template中:

<template>
 <el-table
  :data="tableData3"
  :height="tableHeight"
  border
  style="width: 100%">
  <el-table-column
   prop="date"
   label="日期"
   width="180">
  </el-table-column>
 </el-table>
</template>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
jquery replace方法去空格
May 08 jQuery
为你的微信小程序体积瘦身详解
May 20 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
Vue触发式全局组件构建的方法
Nov 28 #Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 #Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
vue与原生app的对接交互的方法(混合开发)
Nov 28 #Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 #Javascript
vue实现微信分享功能
Nov 28 #Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 #Javascript
You might like
PHP中session变量的销毁
2014/02/27 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php socket通信简单实现
2016/11/18 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
新闻编辑求职信
2014/04/09 职场文书
五一口号
2014/06/19 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python