需求场景:
提示:这里简述相关背景:
例如:项目场景:后台管理为了美观,要求不同分辨率始终保持顶部搜索条件,中间表格,底部分页布局,效果如下:
代码展示
提示:这里直接展示代码,其实比较简单:
原理:就是利用flex布局,最外层定义一个高度可以自己计算,三个板块中间表格板块设置flex:1(独占剩余所有空间),内部使用相对定位,针对表格再设置100%即可:
<template>
<div class="table-page-container">
<div class="page-header">
<div>头部</div>
</div>
<div class="page-body-table">
<div class="table-container">
</div>
</div>
<div class="page-footer">
<div>分页</div>
</div>
</div>
</template>
<script setup>
const tableData = ref([
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
])
</script>
<style lang="scss" scoped>
.table-page-container {
width: 100%;
height: calc(100vh - 90px);
display: flex;
flex-direction: column;
.page-body-table {
flex: 1;
position: relative;
.table-container {
position: absolute;
width: 100%;
height: 100%;
background-color: gray;
}
}
}
</style>
全局优化
// 修改 el-table 默认 高度为 100%,表格会根据分辨率事都展示滚动条
Element.Table.props.height.default = '100%'
// 修改 el-table-column 内容过长自动隐藏
Element.TableColumn.props.showOverflowTooltip.default = true