iview table高度动态设置方法


Posted in Javascript onMarch 14, 2018

在使用iview table表格组件的时候,由于我的屏幕分辨率比较大,在自己pc机上设置的固定高度很适合,在测试(test)时候发现在别的终端如1368*768的机器上都显示不全,下面就把我的和其他机器上效果图做个对比,如图所示:

一、我的机器

iview table高度动态设置方法

二、别人的机器

iview table高度动态设置方法

三、解决办法

原因就是因为表格高度是固定的,在大分辨率下的屏幕可以显示,小分辨率的屏幕就显示不完全,所以我们需要动态的去设置表格的高度,设置方法如下:

1、iview table的写法:

<Table highlight-row border :columns="columns7" :data="data6" ref="table" :height="tableHeight"></Table>

2、高度设置,初始化的时候就设置

(1)首先在data里面初始化

tableHeight: 450,

(2)初始化

mounted() { 
 // 设置表格高度 
 this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 160 
 },

window.innerHeight是浏览器的可用高度,this.$refs.table.$el.offsetTop是表格距离浏览器可用高度顶部的距离,这样就可以完成动态设置了,这样的话就可以适应任何pc端屏幕了

以上这篇iview table高度动态设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS两种定义方式的区别、内部原理
Nov 21 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
js+css3制作时钟特效
Oct 16 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
vue2.0安装style/css loader的方法
Mar 14 #Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 #Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 #Javascript
Vue使用mixins实现压缩图片代码
Mar 14 #Javascript
vue2.0模拟锚点的实例
Mar 14 #Javascript
vue的mixins属性详解
Mar 14 #Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 #Javascript
You might like
我用php+mysql写的留言本
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
英文自荐信
2013/12/15 职场文书
药品促销活动方案
2014/02/14 职场文书
企业元宵节主持词
2014/03/25 职场文书
代领毕业证委托书
2014/08/02 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
材料员岗位职责
2015/02/10 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers