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控制。