element-ui tabs组件导致页面假死浏览器崩溃

环境：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好使，版本没问题。看看是不是布局有问题呢。

element-ui tabs组件导致页面假死浏览器崩溃相关推荐

实战 | Element UI 父子组件传值与事件绑定（正向）
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
富文本解析 wxParse 解析数据造成页面假死
富文本解析 wxParse 解析数据造成页面假死问题描述小程序中总有富文本解析的场景,比如:头条的终端页.我们的终端页使用了 wxParse, 但是由于 wxParse有些小问题,并且项目使用 m ...
Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
mysql 导致iis 假死_解决IIS无响应假死状态
1 查看服务器iis的w3wp.exe对应的应用程序池在IIS6下,经常出现w3wp的内存占用不能及时释放,从而导致服务器响应速度很慢. 今天研究了一下,可以做以下配置: 1.在IIS中对每个网站进 ...
java移动文件导致tomcat死掉_原 netty导致tomcat假死
一.系统需求: 保证后台系统在大并发下正常处理每一个业务连接请求. 二.运作方式: Netty+tomcat.在tomcat的web.xml配置文件中配置一个Listener类用来在tomcat初始化 ...
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
响应式滚动图懒加载 element ui el-carousel 组件优化代码
响应式滚动图懒加载 element ui el-carousel 组件优化代码懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...
Tomcat9.0.13 Bug引发的java.io.IOException:(打开的文件过多 Too many open files)导致服务假死...
问题背景: 笔者所在的项目组最近把生产环境Tomcat迁移到Linux,算是顺利运行了一段时间,最近一个低概率密度的(too many open files)问题导致服务假死并停止响应客户端客户端请求 ...

element-ui tabs组件导致页面假死浏览器崩溃

element-ui tabs组件导致页面假死浏览器崩溃相关推荐

最新文章

热门文章