html的flex布局Element-ui中的el-table在flex下的宽度⾃适应问题
项⽬需求:页⾯中分成左右两边,⼀边的宽度⾃适应(⾥⾯嵌套的是el-table),⼀边的宽度固定
问题:使⽤flex布局,使⽤flex:1后el-table只能⾃适应扩⼤,不能⾃适应缩⼩
Debug:通过控制台发现组件⽣成的table的宽度是动态计算的,翻查源码,发现以下代码段
也就是说,组件的resize事件是绑定在this.$el上了,这应该就是的原因所在了。
flex容器下的width:100%会⼀直向上继承,直到flex容器下第⼀级⼦元素,但是当某个⼦元素的宽度出现固定值并且⼤于flex伸展的宽度的时候,那么容器就不会收缩,⾃然也就触发不了resize事件了。
解决⽅案:可以将设置了flex属性的容器设置position:relative,然后在有el-table的⼦元素加多⼀层div包裹内容,设置position:absolute; width:100%;继承⽗级宽度,那么内容也会继承该div的宽度了