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 相关文章推荐
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
小程序自定义模板实现吸顶功能
Jan 08 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
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 面向对象的一个例子
2011/04/12 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
详解ES6中的let命令
2020/04/05 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python实现simhash算法实例
2014/04/25 Python
python的re模块应用实例
2014/09/26 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
python简单实现刷新智联简历
2016/03/30 Python
python3.5绘制随机漫步图
2018/08/27 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python程序变成软件的实操方法
2019/06/24 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
老师自我鉴定范文
2013/12/25 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
生产车间管理制度
2015/08/04 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书