el-table高度自适应方案（纯CSS、简单、完美）

问题描述

在利用el-table和el-pagination封装成分页表格组件的时候存在自适应的问题。

大致代码如下：

<template>
<div class="full-block flex-layout">
    <div class="flex-auto">
        <el-table height="100%">...</el-table>
    </div>
    <div class="flex-none">
        <el-pagination></el-pagination>
    </div>
</div>
</template>

<style lang="scss">
    .full-block{
        height:100%;
        width:100%;
        overflow:hidden;
    }
    .flex-layout{
        display:flex;
        flex-direction:column;
    }
    .flex-auto{
        flex:1 1 auto
    }
    .flex-none:{
        flex:none
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

以上代码通过flex布局，原本预期是让分页组件始终固定在表格底部，但实际上，表格撑满导致分页组件被挤到下面看不见了。

解决方案

将el-table的父容器的最小高度（min-height）设置为 0 即可。

<template>
<div class="full-block flex-layout">
    <div class="flex-auto" style="min-height=0;">
        <el-table height="100%">...</el-table>
    </div>
    <div class="flex-none">
        <el-pagination></el-pagination>
    </div>
</div>
</template>
1
2
3
4
5
6
7
8
9
10