环境:vue2.6.10 element-ui 2.11.0
问题:缩小浏览器窗口/将页面放大/屏幕分辨率过低导致 页面假死,浏览器崩溃
确实是tabs导致的,将页面中的tabs标签注掉完全没有这个问题
网上百度了好多解决方法,说一下
方案一: vue升级2.6+版本 或element版本降级
然而我的版本没有问题,但是出于敬畏的心里,还是尝试了一下,然而这个方法并不适用于我的问题
方案二: 给el-tabs标签添加上一级兄弟元素 <div> </div>
主要意思是说占个位,那位仁兄也说了此法治标不治本,确实如此,也仅仅是初始渲染没问题而已。弃之
方案三: 给el-tabs添加父元素将其包起来 <el-row><el-col :span="24"><el-tabs></el-tabs></el-col></el-row>
然并卵。弃之
方案四:给el-tabs设置一个宽度 <el-tabs style="min-width: 1040px"></el-tabs>
跟方案二情况一样。弃之
方案五:<el-tabs><el-tab-pane label="用户管理" name="first"></el-tab-pane></el-tabs>
改成这种的写法,然而公司组件是slot插槽写法,且要使用自己的icon 。果断弃之。
到这里感觉基本凉凉了。经过无数次杀浏览器进。发现个问题。
tabs组件本身是好使的,我浏览器最大话窗口加载是没有任何问题的。
之前也没有这个问题。找啊找。随着一级菜单越加越多,多到了一行装不下换行了,或者窗口缩小或页面放大挤掉了我tabs上方单行的菜单导航,它换行了,页面开始卡死,哪哪也点不动了。
结合众网友的方案分析得出是上方菜单导航的高度改变影响了下方tabs的布局,最后给了导航菜单一个固定高度,超出裁切,并不得已给导航菜单父元素加了个父元素,固定宽高,给导航菜单父元素加了overflow-y: hidden; overflow-x: auto;
总结了一下:其实并不关人家tabs啥事儿,这个组件本身是好使的,是其他元素影响到了tabs的布局。
就像是‘我’有毒却不害人,但是你碰我一下你就得挂这种的。tabs好使,版本没问题。看看是不是布局有问题呢。