vue中如何动态设置iview与element

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196523.html

我们在使用 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 高度值的方法，这里做一个记录，希望能够帮助需要的小伙伴。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/