vue中如何动态设置iview与element-ui的table高度值

我们在使用 vue 的框架开发的时候,其中列表是大家经常使用的功能,但是放到我们项目中的话,也有很多属性需要我们二次进行改动。

iview

1、页面上:官方的话是推荐使用数字或者字符串,但我们需要的是动态,所以给他加一个动态值:height="now_height"

<Table
 ref="now_table"
 :height="now_height"
>
</Table>
data() {
  return {
    now_height: null //table 高度
  };
},
mounted() {
  this.now_height = window.innerHeight - this.$refs.now_table.$el.offsetTop - 35 - 120;
},

window.innerHeight当前页面的高度,this.$refs.now_table.$el.offsetTop拿到的是当前指定tabletop值。我这里-35-120是因为我上面还有导航栏还有别的元素,具体你可以根据你的实际情况来定。

element: 原理同上

<el-table
 ref="now_table"
 :height="now_height"
> 
</el-table>
data() {
  return {
    now_height: null //table 高度
  };
},
mounted() {
  this.now_height = window.innerHeight - this.$refs.now_table.$el.offsetTop - 35 - 120
},

以上就是我是如何动态设置 iview 与 element-ui 的 table 高度值的方法,这里做一个记录,希望能够帮助需要的小伙伴。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue中如何动态设置iview与element-ui的table高度值

发表回复