已知需要自适应的页面结构
- 绿色固定高度区域： 可以想象为页面顶部的统计卡片
- 白色自适应高度区域： 可以想象为el-table所在区域
- 蓝色定高区域： 可以想象为分页组件区域
- 黄色动态高度区域： 可以想象为搜索条件面板（你可以认为是定高的也可以认为是不定高的【比如：支持展开/收缩的高级搜索，搜索条件占用的高度可能会从1行变为多行】）
分析
首先要实现对应的页面结构，让白色区域能够自适应高度，采用flex布局，是相对容易的解决方案
- 整体flex布局，高度设置100%，
flex-direction: column; - 白色部分就设置为flex:1
- 绿色和蓝色部分就设置为
固定高度+flex-shrink: 0 - 黄色部分不设置高度，但设置：
flex-shrink: 0，让内容决定容器高度
页面结构搞定了，白色的el-table自适应怎么处理呢？ 可能会导致白色部分高度发生变化的情况：
- 浏览器大小改变
- 黄色区域的内容从1行变成了N行或者从N行变成了1行
根据不同的情况最容易想到的解决方式为：实时监听白色区域大小的改变，并获取这个高度，再将这个高度设置给el-table
如果不考虑3，6这两个图的情况，刚刚想到的方案确实可以，只要监听resize事件，再想办法计算出白色区域高度就好了，可3，6这两个图，光监听窗口的大小改变还不行，还必须再黄色区域大小改变时，重新计算el-table的高度。有没有更简单的办法？
皇天不负有心人，终于让我找了一个通过css设置就能解决的方案：解决element table 宽高自适应 - 掘金 (juejin.cn)
最终示例代码
分页表格组件
<template>
<div class="c-pageTableContainer">
<div class="c-pageTableContainer-table">
<el-table :data="tableData" style="width: 100%" height="100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
<div class="c-pageTableContainer-page"></div>
</div>
</template>
<script>
export default {
name: "PageTable",
data() {
return {
tableData: [
{
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 弄",
},
{
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 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
};
},
};
</script>
<style scoped lang="scss">
.c-pageTableContainer {
height: 100%;
display: flex;
flex-direction: column;
&-table {
flex: 1;
background-color: lightseagreen;
// 重点是这里：开始
position: relative;
::v-deep(.el-table) {
position: absolute;
}
// 重点是这里：结束
}
&-page {
height: 60px;
background-color: lightgray;
flex-shrink: 0;
}
}
</style>
复制代码调用分页表格
<template>
<div class="c-container">
<div class="c-container-top"></div>
<div class="c-container-center">
<div @click="onToggle"><el-button>toggle按钮</el-button></div>
<div v-if="show"><el-button>按钮</el-button></div>
</div>
<div class="c-container-bottom">
<PageTable></PageTable>
</div>
</div>
</template>
<script>
import PageTable from "@/components/table/PageTable";
export default {
name: "AutoHeightElTable",
components: {
PageTable,
},
data() {
return {
show: false,
};
},
methods: {
onToggle() {
this.show = !this.show;
},
},
};
</script>
<style scoped lang="scss">
.c-container {
height: 100%;
display: flex;
flex-direction: column;
&-top {
height: 100px;
background-color: lightblue;
}
&-center {
background-color: lightcoral;
flex-shrink: 0;
}
&-bottom {
flex: 1;
background-color: lightgray;
}
}
</style>
复制代码效果