1、最外层设置弹性盒子布局(为什么这么使用?当你表格有合计
show-summary、summary-method
时,数据少,又想合计跟在表格的后面,这时候,这布局很管用)
<div class="flex flex-col"></div>
2、表格外层嵌套一个
div
盒子,设置样式相对定位,高度100%
<div class="flex flex-col">
<div class="relative h100 flex-auto" v-loading="tableData.loading" element-loading-text="拼命加载中"></div>
</div>
3、表格外层嵌套一个
div
盒子里设置一层template
, 重要(不加高度不会自适应)
<div class="flex flex-col">
<div class="relative h100 flex-auto" v-loading="tableData.loading" element-loading-text="拼命加载中">
<template v-if="!tableData.loading"></template>
</div>
</div>
4、最后为
el-table
, 设置样式为:绝对定位,最大高度100%
<div class="flex flex-col">
<div class="relative h100 flex-auto" v-loading="tableData.loading" element-loading-text="拼命加载中">
<template v-if="!tableData.loading">
<el-table :height="tableData.data.length > 0 ? 'auto' : '100%'" class="absolute maxh100 w100"></el-table>
</template>
</div>
</div>
5、样式文件
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-auto {
flex: 1;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.h100 {
height: 100%;
}
.w100 {
width: 100%;
}
.maxh100 {
max-height: 100% !important;
}