ElementUI el-table 在flex下的寬度自適應問題

 

 

 

 

BUG：在flex容器下面的一個flex:1的子容器裏面寫了個el-table用來展現列表數據，在作寬度自適應測試的時候發現該組件的寬度只會增長不會縮小。

Debug：經過控制檯發現組件生成的table的寬度是動態計算的，翻查源碼，發現如下代碼段

 

 

也就是說，組件的resize事件是綁定在this.$el上了，這應該就是的緣由所在了。

flex容器下的width:100%會一直向上繼承，直到flex容器下第一級子元素，可是當某個子元素的寬度出現固定值而且大於flex伸展的寬度的時候，那麼容器就不會收縮，天然也就觸發不了resize事件了。

解決方案：能夠將設置了flex屬性的容器設置position:relative，而後在子元素加多一層div包裹內容，設置position:absolute; width:100%;繼承父級寬度，那麼內容也會繼承該div的寬度了。

已測試此解決方案，可是仍是不太懂原理，先分享啦