[element-ui] 表格在 `flex` 时实现自适应

彩蛋：后台管理系统一站式平台模板

vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0

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;
}