ElementUI el-table 在flex下的宽度自适应问题
?
?
?
?
BUG：在flex容器下面的一個(gè)flex:1的子容器里面寫(xiě)了個(gè)el-table用來(lái)展示列表數(shù)據(jù)，在做寬度自適應(yīng)測(cè)試的時(shí)候發(fā)現(xiàn)該組件的寬度只會(huì)增加不會(huì)縮小。
Debug：通過(guò)控制臺(tái)發(fā)現(xiàn)組件生成的table的寬度是動(dòng)態(tài)計(jì)算的，翻查源碼，發(fā)現(xiàn)以下代碼段
?
?
也就是說(shuō)，組件的resize事件是綁定在this.$el上了，這應(yīng)該就是的原因所在了。
flex容器下的width:100%會(huì)一直向上繼承，直到flex容器下第一級(jí)子元素，但是當(dāng)某個(gè)子元素的寬度出現(xiàn)固定值并且大于flex伸展的寬度的時(shí)候，那么容器就不會(huì)收縮，自然也就觸發(fā)不了resize事件了。
解決方案：可以將設(shè)置了flex屬性的容器設(shè)置position:relative，然后在子元素加多一層div包裹內(nèi)容，設(shè)置position:absolute; width:100%;繼承父級(jí)寬度，那么內(nèi)容也會(huì)繼承該div的寬度了。
已測(cè)試此解決方案，但是還是不太懂原理，先分享啦
轉(zhuǎn)載于:https://www.cnblogs.com/qingcui277/p/9881673.html
總結(jié)
以上是生活随笔為你收集整理的ElementUI el-table 在flex下的宽度自适应问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Centos7之Gcc安装
- 下一篇： 创建对象并初始化