element -UI升级，使用el-tabs导致浏览器卡死问题

最新推荐文章于 2025-05-08 15:56:50 发布
最新推荐文章于 2025-05-08 15:56:50 发布
阅读量2.9k 收藏
点赞数
分类专栏： Vue 框架技术 文章标签： ui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code_carrierV1/article/details/126617415
版权
本文分享了ElementUI组件库升级过程中的经验教训。由于版本不兼容问题，作者将ElementUI升级到了2.10.1，并将Vue升级到了2.6.10，解决了el-tabs导致的页面卡死问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

elementUI升级踩坑

项目维护开发时要用到elementUI的某些组件，发现当前项目element-ui版本过低，无法使用，打算升级一下，
所以用npm update element-ui 升级到最新，结果项目运行时发现有些用到el-tabs的页面直接卡死

查了下 vue版本在2.5.10之下你的elementui版本就不可高于2.7，但如果低于2.10.1的话有些组件用不了那升级就没意义了，所以我又把elementUI版本退到2.10.1，把Vue版本从2.5升级到2.6
版本回退只能卸载再安装指定版本
npm uninstall element-ui
npm install element-ui@2.10.1

升级vue只需要升级vue版本与vue-template-compiler的版本，将版本升级到2.6.10即可。vue升级我是直接改动package.json文件
“vue”: “2.6.10”,
“vue-template-compiler”: “2.6.10”,
在这里插入图片描述
然后删掉package-lock.json文件重新npm install 安装就行了

最后以下版本发现项目在浏览器正常运行，elementUI相关组件也可以使用到，el-tabs不会卡死
elementUI：2.10.1
vue：2.6.10

已解决vue element 用el-tabs浏览器卡死的问题
疑问 搜索 动手 解决 记录
03-17 8179
文章最后有答案 遇到这个问题 ,起因用 el-tab-pane 与 el-dialog 组合导致浏览器卡死。 经过分析原因是 el-tab-pane 添加 内容 会出现内部死循环，从而导致浏览器卡死。 困惑许久 , 查询良久 ,列出了几个网上大仙们给的答案 , 如下: 一 . 降低版本系列(已尝试 , 垃圾没有效果) 二 . 重装tabs插件,全局引入系列(已尝试 , 垃圾没有效果) 三 . 算了直接给你们放最搞笑的一个(虽然搞笑,但是是唯一一个成功的) 哈哈哈哈,没有看到这图上评论的时候 , 我和同
element tab 导入html,element-ui中，使用el-tabs嵌套el-table，初次加载tab页时table表头和表格数据错位...
weixin_34669890的博客
07-02 2057
\#\#\# 问题描述element-ui中，使用el-tabs嵌套el-table，每个tab页下放置引入的子组件。并有v-if控制它的显示。子组件中的el-table中设置了列的宽度。问题出在初次加载tab页时table表头和表格数据错位。点击其他tab页再切换回去的时候错位消失了。下图是初次点击左侧菜单进来时的状态点击其他tab页比如已审批以后，再切回原来的第一个tab后\#\#\# 相关代...
jQuery 1，web前端自学
2301_79055083的博客
04-04 677
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取资料领取方式：点击这里前往免费获取。
el-table嵌套el-tab造成页面卡顿卡死和数据不刷新问题
最新发布
fangfangya123的博客
05-08 241
方法三：el-tabs加一个v-if=show，在关闭时设置show=false。方法二：把el-tabs-pane中的内容去掉写在外面。destroy方法强制销毁组件。方法一，在关闭弹窗时。
使用 elementUI el-tabs 浏览器卡死问题
H的博客
08-02 5366
记录自己踩的一个坑 记得有维护过一个项目，就在里面加了些功能，用到了el-calendar组件，我加上之后就报错了，报该组件未注册，我就看了一下element版本，原来是版本过低，然后就升级了一下版本，然后一切正常，但是新的问题来了，有el-tabs组件的那个页面不能点击了，一点浏览器就直接卡死。 然后再网上看到别人处理的几种方法：（不用试了不行） 1.el-tab-pane元素内不能有内...
el-tabs标签页浏览器卡死；使用el-tab-pane浏览器卡死；element-ui使用el-tab-pane浏览器卡死，el-tab，el-tab-pane版本不兼容
i_am_a_div的博客
10-25 1160
el-tabs标签页浏览器卡死；使用el-tab-pane浏览器卡死；element-ui使用el-tab-pane浏览器卡死，el-tab，el-tab-pane版本不兼容
element-ui升级后某些页面直接卡死，el-tabs组件引起的错误
jxysgzs的博客
11-21 2834
今天遇到一个非常恶心的错误。因为想用element-ui2.12.0中的某些icon组件，所以升级了一下element-ui的版本。从2.3.4直接升级到了2.12.0，没想到程序上线后某些页面点击直接卡死，前端系统直接出问题，打开network查看后发现一个JS加载不出来导致的。随后在网上找了很多答案 一：使用element-ui里面的组件时，要用 包裹起来在用就可以了，像这样 <el-...
element-ui el-tabs 和 el-table混合使用的问题
热门推荐
Bynine9的博客
01-18 1万+
最近在使用vue的element-ui前端框架中的el-tabs和el-table混合使用，发现了很多小问题。 1、问题一：el-tabs会使el-tab-pane 下面的数据一次性加载出来，导致数据更新不及时 刚开始写的代码时这样的，发现页面加载的时候，会把两个tab的页面的请求一次性加载出来。如果tab页面过多，会导致请求过多，造成页面卡顿，最重要的是页面数据实时变化的话不能及时获取到最新数据。 <el-tabs v-model="activeName" @tab-click="handl
解决 elementui@2.13.0 > el-tab-pane 导致浏览器卡死的问题。
不啦草的草原
12-31 3762
解决 elementui@2.13.0 > el-tabs el-tab-pane 导致浏览器卡死的问题。 vue-cli3 + element-ui@2.13.0 不兼容引起的问题。
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
10-16
此外，检查项目代码中是否有其他问题，例如循环依赖、错误的递归组件引用，或者 DOM 结构错误等，都可能导致浏览器卡死。 总结来说，遇到 ElementUI 相关问题时，可以通过升级到适当的版本、使用 layout 包裹组件、...
笔记el-dialog与el-tabs结合使用会导致页面卡死浏览器崩溃
qq_42157868的博客
05-04 570
修复方法 手写弹窗组件或者tabs组件 或者升级为新版框架。原因：版本问题的框架缺陷。
vue element 用el-tabs浏览器卡死的问题
GracieLaw的博客
07-21 837
el-tab-pane 与 el-dialog 组合导致浏览器卡死的解决方案
vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死
weixin_48226213的博客
02-16 855
vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死
element ui el-table在ie浏览器数据多时卡顿问题
gu_eu的博客
01-11 3054
element ui el-table在ie浏览器数据多时卡顿问题 vue项目中使用ElementUI组件库，在需要兼容ie时，使用到el-table，在表格数据较多的情况下，分页选每页数据展示超过20条时，表格下滑很卡顿。 解决方案： 1、升级elementUI到v2.8.0以上 2、避免使用表格中使用show-overflow-tooltip 3、在el-table或父元素上设置z-index，或调高z-index （针对ie）（调高z-index,请注意页面弹出框等元素z-index值要比el-ta
element-ui2.8.2版本项目,运行导致浏览器奔溃且无法关掉
大唐锦绣的博客
05-20 1189
在为element-ui升级到最新版本后，突然发现运行项目导致浏览器奔溃且无法关掉,也无任何异常报错。下意识就联想到是升级的问题。最后定位到是el-tabs组件，一来二去，花了大概一个小时。想一想还是上github上看看。果不其然。发现大家普遍在升级到2.8之后都出现了页面卡死的问题。以此篇记录，让大家少走弯路 原来element-ui2.8.2需要最低的vue版本为@^2.5.16，笔者才...
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
2301_76866366的博客
06-24 1093
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
elementui的tab和动态组件一起使用的时候卡住
qqCEM的博客
01-10 619
modal中使用tab和动态组件的时候关闭modal导致浏览器卡死
解决使用element-ui + vue 时，dialog中嵌入tabs，再次关闭dialog会导致浏览器卡死的解决方案
qq_48294048的博客
05-12 1074
链接：使用element-ui + vue 时，dialog中嵌入tabs，再次关闭dialog会导致浏览器卡死的解决方案_向上爬的蜗牛君的博客-CSDN博客
如何解决Vue-element-ui中的el-tabs中el-tab-pane未能实现100%自适应高度，导致内部放置的div内容被遮挡的问题？
12-14
在Vue-element-ui中使用el-tabs组件时，有时会遇到el-tab-pane未能实现100%自适应高度，导致内部放置的div内容被遮挡的问题。要解决这个问题，可以尝试以下几种方法： 1. 使用CSS Flex布局： 在el-tabs容器上设置display: flex，并在el-tab-pane上设置flex: 1。 ```vue <template> <el-tabs class="full-height-tabs"> <el-tab-pane> <!-- 你的内容 --> </el-tab-pane> <!-- 其他tab-pane --> </el-tabs> </template> <style> .full-height-tabs { display: flex; flex-direction: column; height: 100%; } .full-height-tabs .el-tab-pane { flex: 1; overflow: auto; } </style> ``` 2. 使用v-if控制tab的显示： 通过v-if指令来确保只有在激活的tab才渲染内容。 ```vue <el-tabs v-model="activeTab"> <el-tab-pane name="tab1" v-if="activeTab === 'tab1'"> <!-- tab1的内容 --> </el-tab-pane> <el-tab-pane name="tab2" v-if="activeTab === 'tab2'"> <!-- tab2的内容 --> </el-tab-pane> <!-- 其他tab-pane --> </el-tabs> ``` 3. 使用计算属性动态设置高度： 在计算属性中计算容器高度，并将其应用到el-tabs组件上。 ```vue <template> <el-tabs :style="{ height: tabHeight + 'px' }"> <el-tab-pane> <!-- 你的内容 --> </el-tab-pane> <!-- 其他tab-pane --> </el-tabs> </template> <script> export default { data() { return { tabHeight: 0 } }, mounted() { this.updateTabHeight(); window.addEventListener('resize', this.updateTabHeight); }, beforeDestroy() { window.removeEventListener('resize', this.updateTabHeight); }, methods: { updateTabHeight() { this.tabHeight = window.innerHeight - /* 其他元素高度 */; } } } </script> ``` 4. 使用CSS Calc函数： 直接在CSS中使用calc函数计算高度。 ```css .el-tabs { height: calc(100vh - /* 其他元素高度 */); } .el-tabs .el-tab-pane { height: 100%; overflow: auto; } ``` 这些方法中，第一种使用Flex布局的方法通常是最简单和最有效的。它可以确保el-tab-pane始终占据el-tabs的剩余空间，同时允许内部内容在需要时滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值