flex布局下使用el-table组件的坑!

后台项目里基础布局用了flex布局,左侧可伸缩菜单栏固定宽度,右侧内容区域flex:1,结果在有el-table的页面中折叠菜单栏后无法伸缩回来了。

查到原因是因为el-table的宽度是动态计算得来的:


网上给的解决方案基本是将设置了flex属性的容器设置position:relative,然后在子元素加多一层div包裹内容,设置position:absolute; width:100%;继承父级宽度

但是这种写法影响页面其他布局,尤其是已经写好了页面才发现这个问题,肯定不能这样改了。

这时应该将原本flex:1的子元素的width通过calc计算得来:

你可能感兴趣的:(flex布局下使用el-table组件的坑!)