element ui table 固定表头height的值能否是变量

Question

使用element ui 的table表格设置表格内容的高度属性，能否不写死，设置变量，不同屏幕高度是不同的。如下面代码中height="250"，属性值用变量怎么实现？

<el-table

:data="tableData3"
height="250"
border
style="width: 100%">
<el-table-column
  prop="date"
  label="日期"
  width="180">
</el-table-column>
<el-table-column
  prop="name"
  label="姓名"
  width="180">
</el-table-column>
<el-table-column
  prop="address"
  label="地址">
</el-table-column>

</el-table>

Answer 1

//定义变量
const a = 200;
//使用变量，注意冒号
:height="a"

Answer 2

---

我的做法是在mounted中去动态计算

mounted () {
    this.$nextTick(() => {
        let self = this;
        this.tableHeight = this.$refs.table.$el.offsetHeight;

            // 通过捕获系统的onresize事件触发去改变原有的高度
        window.onresize = function() {
            self.tableHeight = self.$refs.table.$el.offsetHeight
        }
    })
},

---

Answer 3

我想通过样式控制，加上下面的样式后，谷歌浏览器可以，360浏览器不行，火狐浏览器表头和内容列会有一点错位，难道只能通过楼上的方式解决………………
.el-table {

height: 100%;

}
.el-table__body-wrapper {

height: calc(100% - 42px);

}

Answer 4

试了一下写在mounted中没起效果，可以写在computed中