elementUI表格自适应高度

开发过程中，页面难免需要做到适应屏幕大小的动态变化，比如表格高度随着窗口缩放而变化；

我的框架：elementui+vue

在elementui里有详细的记载高度属性的使用方式：

 

 然而如果一开始动态高度tableHeight定义时赋值（如tableHeight：100或tableHeight：'100'），之后表格的高度则不会再根据tableHeight变化而变化，所以定义tableHeight时应该为null或""；

html

<template>
    <el-table :data="tableData" :height="tableHeight" 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>
  </template>

js

new Vue({
    data:function(){ return{ tableHeight:null,
　　　　　　 tableData:[]
　　　　　}
}, mounted(){ window.onresize = function() { this.tableHeight=计算; }.bind(this) } })

这样随窗口变化的自适应就ok了。

如果动态高度不起作用，还有个重新渲染表格的办法，就是使用v-if控制。