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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
AngularJS表单验证功能
Oct 19 Javascript
对node.js中render和send的用法详解
May 14 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
Nuxt的动态路由和参数校验操作
Nov 09 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文本操作类
2006/11/25 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
laravel自定义分页效果
2017/07/23 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Python简单进程锁代码实例
2015/04/27 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Python基本socket通信控制操作示例
2019/01/30 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
django rest framework 过滤时间操作
2020/07/12 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
工厂厂长的职责
2013/12/12 职场文书
农村党员干部承诺书
2015/05/04 职场文书
义卖募捐活动总结
2015/05/09 职场文书
业务员管理制度范本
2015/08/06 职场文书
python 调用js的四种方式
2021/04/11 Python
Golang入门之计时器
2022/05/04 Golang
Android 中的类文件和类加载器详情
2022/06/05 Java/Android