![cover](https://img-blog.csdnimg.cn/direct/24129083a3c949d2a7b8226977295834.png)
el-table高度自适应方案(纯CSS、简单、完美)
通过flex布局,原本预期是让分页组件始终固定在表格底部,但实际上,表格撑满导致分页组件被挤到下面看不见了。解决方案就是在原本flex布局的基础上让el-table的父容器的min-height=0。
![](https://csdnimg.cn/release/devpress/public/img/ic-book.4f347164.png)
一键AI生成摘要,助你高效阅读
问答
·
问题描述
在利用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>
以上代码通过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>
更多推荐
所有评论(0)