需求描述:左右布局如下,其他信息可切换隐藏,列表宽度自适应
image.png
问题描述:使用flex布局,使用flex:1后el-table只能自适应扩大,不能自适应缩小
问题原因:el-table组件的宽度是动态计算的,源码中resize事件绑定在this.$el上,flex容器下的width:100%会一直向上继承,直到flex容器下第一级子元素,但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候,那么容器就不会收缩,也就触发不了resize事件了。(源码见resize-event.js)
解决方案:
// html
<div class="flex-wrapper">
<div class="table-wrapper">
// el-table外多包裹一层div
<div class="table-inner">
<el-table>...</el-table>
</div>
</div>
<div class="content-wrapper">其他信息</div>
</div>
// css
.flex-wrapper{
display: flex;
justify-content: space-between;
.table-wrapper{
flex: 1;
// 设置flex属性的容器设置相对定位
position: relative;
// 一级子元素设置绝对定位及宽度,继承父级宽度
.table-inner{
position: absolute;
width: 100%;
}
}
.content-wrapper{
width: 200px; // 右侧固定宽度
}
}
网友评论