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的寬度了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM