iview table高度动态设置

标签: iview table 高度 动态设置 height
1845人阅读 评论(0) 收藏 举报
分类:
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中的render函数,格式化日期数据

iview和element大部分功能相同,但是发现它并没有formatter,在使用它的table组件的时候,有一行需要时间戳要转换成指定的日期格式,感觉以后还会用到,特此记录一下...
  • zjq852533445
  • zjq852533445
  • 2017-12-11 18:36:31
  • 2386

在iview的Table中添加Select(render)

iview的新手文档写的并不怎么样,把锅都推给了vue,这一天的工作卡在了在Table中加入Select的问题上,再次记录学习过程:首先对Render进行分析,在iview官方的文档中,找到了tabl...
  • Dead_Rabbit6_0
  • Dead_Rabbit6_0
  • 2018-02-02 15:24:30
  • 1257

iview table高度动态设置

iview table高度动态设置     在使用iview table表格组件的时候,由于我的屏幕分辨率比较大,在自己pc机上设置的固定高度很适合,在测试(test)时候发现在别的终端如1368...
  • u013144287
  • u013144287
  • 2017-12-30 19:34:58
  • 1845

iview table表格render函数渲染下拉列表

只需要把render函数渲染的地方换成下面的代码就好啦!!! render: (h, params) =&amp;gt; { return h('Select', { p...
  • weixin_39494582
  • weixin_39494582
  • 2018-03-23 11:10:29
  • 23

iview table render集成switch开关

iview table render集成switch开关
  • u013144287
  • u013144287
  • 2018-01-02 18:22:56
  • 1600

IOS TableView的Cell高度自适应,UILabel自动换行适应

IOS TableView的Cell高度自适应,UILabel自动换行适应 项目的源码下载地址:http://download.csdn.net/detail/swingpyzf/683...
  • SwingPyzf
  • SwingPyzf
  • 2014-01-10 21:02:13
  • 90694

iView常用组件小技巧!!

清空Select 选择器,当时用联动的时候,就会发现,你已经将值置空了,有时候,得到的结果却是有值的;有时候,得到结果就是空的正确的。那是因为Select 组件值没有清空。请看如下: 这样就可以清空s...
  • xustart7720
  • xustart7720
  • 2017-11-11 12:04:15
  • 1881

GridView 列表绑定,分页,排序,全选,反选,查看,编辑,删除,批量删除

前台代码:
  • qq_31971935
  • qq_31971935
  • 2016-03-04 10:43:46
  • 347

vue iview组件表格 render函数的使用

如果要在标签中加入属性,例如img 中src属性 a标签中href属性 此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', ...
  • zjl516088421
  • zjl516088421
  • 2017-09-22 21:17:06
  • 7914

浅谈Vue的iView

iView 是一套基于Vue.js的开源UI组件库,主要服务于 PC 界面的中后台产品。 1、iView的特性 1) 高质量、功能丰富 2) 友好的API ,自由灵活地使用空间 3) 细致、漂亮的...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-05-02 13:38:53
  • 13653
    个人资料
    持之以恒
    等级:
    访问量: 9万+
    积分: 1544
    排名: 3万+
    友情链接
    最新评论