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 iframe内部出滚动条
Feb 11 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
BootStrap selectpicker
Jun 20 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
express.js中间件说明详解
Mar 19 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python如何实现内容写在图片上
2018/03/23 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
美术教学感言
2014/02/22 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
专业技术职务聘任书
2014/03/29 职场文书
报告会主持词
2014/04/02 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL