【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; // 重要
}
}
}