[element-ui] 表格在 `flex` 時實現自適應

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