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中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 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开发负载均衡指南
2010/07/17 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
短信提示使用 特效
2007/01/19 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
js返回顶部实例分享
2016/12/21 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
vue模板语法-插值详解
2017/03/06 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
python操作mysql数据库
2017/03/05 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
利用python获取Ping结果示例代码
2017/07/06 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
如何提高MySql的安全性
2014/06/19 面试题
集团公司总经理岗位职责
2013/12/20 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
团代会邀请函
2015/02/02 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS