问题:el-table与flex产生的宽度自适应失效

需求描述:左右布局如下,其他信息可切换隐藏,列表宽度自适应


image.png

问题描述:使用flex布局,使用flex:1后el-table只能自适应扩大,不能自适应缩小
问题原因:el-table组件的宽度是动态计算的,源码中resize事件绑定在this.$el上,flex容器下的width:100%会一直向上继承,直到flex容器下第一级子元素,但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候,那么容器就不会收缩,也就触发不了resize事件了。(源码见resize-event.js)

解决方案:

// html
// el-table外多包裹一层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; // 右侧固定宽度 } }

你可能感兴趣的:(问题:el-table与flex产生的宽度自适应失效)