问题描述:
如下图:在左侧菜单栏折叠/展开的时候右侧设置flex:1;自适应布局的区域由于table表格宽度已经渲染,会出现横向滚动条不能自适应。
image.png image.png
解决方案:给table外面嵌套一层div.page-right-wrapper,并设置绝对定位,给.page-right设置flex:1同时并设置相对定位
<div class="container">
<div class="page-left">
</div>
<div class="page-center">
</div>
<div class="page-right">
<div class="page-right-wrapper">
<el-table :data="appTableData">
<el-table-column prop="appName" label="应用名称" min-width="150"></el-table-column>
<el-table-column prop="version" label="应用版本" min-width="150"></el-table-column>
</el-table>
</div>
</div>
</div>
.container{
display: flex;
}
.page-left{
width: 200px;
}
.page-center{
width: 150px;
}
.page-right{
flex: 1;
position: relative;
}
.page-right-wrapper{
position: absolution;
width: 100%;
}
网友评论