element中table高度自适应的实现


Posted in Javascript onOctober 21, 2020

1.开发环境 vue+element

2.电脑系统 windows10专业版

3.在开发的过程中,我们经常会使用到 element中的table,但是我们也发现了在table的配置中,只能设置 具体的高度不能设置百分比,怎么实现table高度自适应呢?方法如下:

4.在对应的vue模板中添加如下代码:

<el-table
     :data="tableData"
     row-key="id"
     sortable
     style="width: 96%"
     :height="taheight"
     default-expand-all
    >
    </el-table>

5.在 return 中添加如下代码:

taheight:"90%",

6.在mounted中添加如下代码:

_Dchen.$nextTick(() => {
  this.taheight = (window.innerHeight-this.ttaheight/2)+"%";
 })

7.效果图如下:

element中table高度自适应的实现

到此这篇关于element中table高度自适应的实现的文章就介绍到这了,更多相关element table高度自适应内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 #Javascript
原生小程序封装跑马灯效果
Oct 21 #Javascript
uniapp实现横向滚动选择日期
Oct 21 #Javascript
实现vuex原理的示例
Oct 21 #Javascript
详解JavaScript类型判断的四种方法
Oct 21 #Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 #Javascript
vue中template的三种写法示例
Oct 21 #Javascript
You might like
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python实现flappy bird小游戏
2018/12/24 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
全陪导游欢迎词
2014/01/17 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
小学班主任评语大全
2014/04/23 职场文书
考核评语大全
2014/04/29 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
合作与交流自我评价
2015/03/09 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
redis数据结构之压缩列表
2022/03/21 Redis