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;
},
}
标签:el,clientHeight,element,ui,var,table From: https://www.cnblogs.com/Jishuyang/p/16741195.html