vue后台管理项目左菜单栏伸缩-影响右侧内容宽度(可变宽不能缩小)
我们使用vue做后台管理时候,使用flex布局,el-menu左侧菜单栏有一定宽度,右侧路由出口router-view展示内容。内容区域样式设置flex=1就可以自适应了。问题:当左侧菜单栏缩进时,右侧内容自适应,宽度会变宽,el-table的style=100% table也会变宽再当左侧菜单栏伸展出来时,右侧内容就会超出视口宽度。这时右侧内容宽度超出了视口,并出现了滚动条 ,其实你将窗口放大左
·
我们使用vue做后台管理时候,使用flex布局,el-menu左侧菜单栏有一定宽度,右侧路由出口router-view展示内容。内容区域样式设置flex=1就可以自适应了。
问题:当左侧菜单栏缩进时,右侧内容自适应,宽度会变宽,el-table的style=100% table也会变宽
再当左侧菜单栏伸展出来时,右侧内容就会超出窗口宽度。
这时右侧内容宽度超出了视口,并出现了滚动条 ,其实你将窗口放大左侧内容也会变宽,但是再缩小时却不会随着缩小,出现同样的问题。
解决方法:
给右侧内容区域添加overflow:hidden属性,就可以解决该问题,无论窗口放大缩小右侧内容都会随之变化自适应。
我看网上资料有同学在做右侧是Echarts图标时也会遇到该问题,他们解决方法是使用element-resize-detector插件通过resize重新适应内容宽度。为此记录一下吧
更多推荐
已为社区贡献1条内容
所有评论(0)