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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 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
Session保存到数据库的php类分享
2011/10/24 PHP
解析php5配置使用pdo
2013/07/03 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
详解Immutable及 React 中实践
2018/03/01 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
python之wxPython应用实例
2014/09/28 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
Python按钮的响应事件详解
2019/03/04 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
python链表类中获取元素实例方法
2021/02/23 Python
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
音乐学个人的自荐书范文
2013/11/26 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
JS代码编译器Monaco使用方法
2021/06/11 Javascript
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL