element-ui el-table 高度自适应

element-ui  el-table 高度自适应

<div ref="searchHeader" class="div_search search_title" :class="{ div_search_index: !isExpand }">
  <el-form ref="dataForm" :model="listQuery" label-position="left" label-width="70px">
    <el-form-item class="div_item input_search" label="所属机构">
      <org-tree @get-orgid="changeOrg"></org-tree>
    </el-form-item>
    <el-form-item class="div_item input_search" label="排查内容">
      <el-input class="filter-item" v-model="listQuery.content"></el-input>
    </el-form-item>
    <div class="left">
      <el-button @click="getList(1)" class="button_search" size="medium" type="primary">查询</el-button>
      <el-button @click="editClick(null,'新建')" class="button_search" size="medium" type="primary">新建</el-button>
    </div>
  </el-form>
</div>

<el-table
      ref="refTable" :data="list"
      v-loading="listLoading"
      element-loading-text="加载中" fit
      highlight-current-row
      style="width: 100%"
      :max-height="maxHeight">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column  min-width="120" align="center" prop="orgName" label="所属机构"></el-table-column>
      <el-table-column  min-width="120" align="center" prop="areaName" label="所属部门"></el-table-column>
      <el-table-column  min-width="150" align="center" prop="stateSign" label="状态">
         <template slot-scope="scope">{{ scope.row.stateSign | state}}</template>
      </el-table-column>
      <el-table-column  min-width="150" align="center"label="操作">
       　　<template slot-scope="scope">
       <el-button @click="editClick(scope.row,'编辑')">编辑</el-button>
　　</template>
</el-table>

data: function () {
  return {

　　　　maxHeight: null,

  };
},

methods:{

　　setHeight: function () {
  　　　var that = this;
  　　　var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
  　　　that.maxHeight = screenHeight - that.$refs.searchHeader.clientHeight - 156;
　　},

}