很多时候我们做一个表格页面,页面需要自适应,也就是一屏展示,也就是表格的高度不能写死,需要铺满剩余页面高度.
<template>
<div class="page_component">
<!-- 查询条件 -->
<div class="top">
</div>
<!-- 表格 -->
<div class="table_box">
<el-table
height="100%"
border
:header-cell-style="{ background: '#f5f5f5', color: '#333' }"
:data="dataList"
>
<el-table-column
prop="area"
label="地区"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="school"
width="175"
label="学校"
align="center"
show-overflow-tooltip
>
</el-table-column>
</el-table>
</div>
<!-- 分页控件 -->
<el-col :span="24" class="pagination-box">
<el-pagination
@current-change="(val) => getTable(val)"
@size-change="handleSizeChange"
:current-page="paginations.page"
:page-size="paginations.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="paginations.total_count"
align="center"
>
</el-pagination>
</el-col>
</div>
</template>
<script>
export default {
data() {
return {
}
},
};
</script>
<style lang="scss" scoped>
.page_component{
height:100%;
width:100%;
display: flex;
flex-direction: column;
padding: 15px 20px;
}
.page_component .table_box {
flex: 1;
position: relative;
}
.page_component .table_box>.el-table {
position: absolute;
}
</style>