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 相关文章推荐
基于JQuery的日期联动实现代码
Feb 24 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
angular第三方包开发整理(小结)
Apr 19 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
详解js异步文件加载器
2016/01/24 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
JS继承用法实例分析
2015/02/05 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
简单介绍Python中的JSON模块
2015/04/08 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python程序封装为win32服务的方法
2021/03/07 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
详解python配置虚拟环境
2019/04/08 Python
详解Python 中的容器 collections
2020/08/17 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
房地产销售计划书
2014/01/10 职场文书
共产党员承诺书
2014/03/25 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
大学生励志演讲稿
2014/04/25 职场文书
高考励志标语
2014/06/05 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
python获取带有返回值的多线程
2022/05/02 Python