iview table高度动态设置方法
在使用iview table表格组件的时候,由于我的屏幕分辨率比较大,在自己pc机上设置的固定高度很适合,在测试(test)时候发现在别的终端如1368*768的机器上都显示不全,下面就把我的和其他机器上效果图做个对比,如图所示:
一、我的机器
二、别人的机器
三、解决办法
原因就是因为表格高度是固定的,在大分辨率下的屏幕可以显示,小分辨率的屏幕就显示不完全,所以我们需要动态的去设置表格的高度,设置方法如下:
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高度动态设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
您可能感兴趣的文章:
- 浅谈vue的iview列表table render函数设置DOM属性值的方法
相关推荐
-
浅谈vue的iview列表table render函数设置DOM属性值的方法
如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属
-
iview table高度动态设置方法
在使用iview table表格组件的时候,由于我的屏幕分辨率比较大,在自己pc机上设置的固定高度很适合,在测试(test)时候发现在别的终端如1368*768的机器上都显示不全,下面就把我的和其他机器上效果图做个对比,如图所示: 一.我的机器 二.别人的机器 三.解决办法 原因就是因为表格高度是固定的,在大分辨率下的屏幕可以显示,小分辨率的屏幕就显示不完全,所以我们需要动态的去设置表格的高度,设置方法如下: 1.iview table的写法: <Table highlight-row bord
-
vue iview 导航高亮动态设置方式
目录 vue iview导航高亮动态设置 vue element导航栏高亮显示问题 问题1 问题2 vue iview导航高亮动态设置 在开发的是时候,路由发生了跳转但是发现导航的没有进行高亮设置,在iview的menu组件中控制高亮的是active-name,现在动态设置active-name 完成高亮 <Menu :active-name="activeName" theme="light" width="auto" :open-nam
-
element中table高度自适应的实现
1.开发环境 vue+element 2.电脑系统 windows10专业版 3.在开发的过程中,我们经常会使用到 element中的table,但是我们也发现了在table的配置中,只能设置 具体的高度不能设置百分比,怎么实现table高度自适应呢?方法如下: 4.在对应的vue模板中添加如下代码: <el-table :data="tableData" row-key="id" sortable style="width: 96%" :
-
js style动态设置table高度
直接在table标签中设置下不就行了吗?这是静态的,如果要动态设置你会吗? function com_onresize(){ var contentsHeight = document.body.clientHeight; var buttonsHeight = document.getElementById( "buttons" ).offsetHeight; var head1Height = document.getElementById( "head1" )
-
微信小程序动态设置图片大小的方法
我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性: 1.src 图片资源地址 2.mode 图片裁剪.缩放的模式 3.binderror 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 4.bindload 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height
-
解决iview多表头动态更改列元素发生的错误的方法
解决iview 'You may have an infinite update loop in watcher with expression "columns"' 解决方案 单表头是可以动态变化不需要增添什么东西 多表头目前iview尚不能动态变化,会报错You may have an infinite update loop in watcher with expression "columns"解决方法是github大神提供的:需要修改iview.js源码
-
vue 实现动态设置元素的高度
目录 vue动态设置元素的高度 获取元素高度总是不准确的问题 解决办法 vue动态设置元素的高度 1. 添加样式绑定 <div class="container" :style="{height: scrollerHeight}"> </div> 2. 添加属性计算 computed: { // 滚动区高度 scrollerHeight: function() { return (window.innerHeig
-
node中Express 动态设置端口的方法
能够动态设置端口的话,调试起来会比较方便,不需要因为默认端口被占用去改代码,还可以多开.代码如下,其实没啥难度,只要你了解nodejs里的process模块,很容易就能写出来. 假设我们想要的命令格式为node app.js 8000 var process = require('process') var port = (function () { if (typeof (process.argv[2]) !== 'undefined') { // 如果输入了端口号,则提取出来 if (isN
-
Java通过反射机制动态设置对象属性值的方法
/** * MethodName: getReflection<br> * Description:解析respXML 在通过反射设置对象属性值 * User: liqijing * Date:2015-7-19下午12:42:55 * @param clzzName * @param respXML * @return * @throws ClassNotFoundException * @throws DocumentException * @throws IllegalArgumentE
随机推荐
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
- jQuery树形下拉菜单特效代码分享
- iOS AVPlayer切换播放源实现连续播放和全屏切换的方法
- python数据结构树和二叉树简介
- 对js中回调函数的一些看法
- js+css3制作时钟特效
- 浅析JavaScriptSerializer类的序列化与反序列化
- Bootstrap实现渐变顶部固定自适应导航栏
- CI框架实现框架前后端分离的方法详解
- Android 将文件下载到指定目录的实现代码
- Android实现TextView中文字链接的4种方式介绍及代码
- 拖动table标题实现改变td的大小(css+js代码)
- 分享10段PHP常用代码
- JS刷新框架外页面七种实现代码
- Java中几个Reference常见的作用详解
- Android获取手机SIM卡运营商信息的方法
- JS+CSS实现电子商务网站导航模板效果代码
- php传值方式和ajax的验证功能
- Jquery ajaxStart()与ajaxStop()方法(实例讲解)
- JS 设置Cookie 有效期 检测cookie