[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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章