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拿到的是当前指定table的top值。我这里-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 高度值的方法，这里做一个记录，希望能够帮助需要的小伙伴。

以上关于vue中如何动态设置iview与element-ui的table高度值的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。