【vue3中el-table表格高度自适应】

分享一种开发中遇到的比较方便的表格高度自适应方案

template代码

<div class="page">
	<div class="table_wrap">
		<el-table>
		</el-table>
	</div>
</div>

css代码
将el-table设置为绝对定位，相对于父元素定位且高度100%，这样表格就会占据它父元素的全部高度。
父元素的高度设置为flex:1，将根据页面的高度进行适配。

.page {
	display: flex;
	.table_wrap {
		flex: 1;
		height: 100%;
		position: relative;
		:deep(.el-table) {
			position: absolute;
			height:100% !important; // 重要
		}
	}
}