element-ui使用el-tabs组件的时候浏览器直接卡死的问题

时间:2024-03-08 11:14:18

遇到这个问题的原由是:本身自己项目的elementUI版本是2.0.11较低了,项目有个功能是自定义progress进度条颜色,无奈高版本的才有这个配置,所以就升级了elementUI,升级到了最高版本2.10.0。这样就出现问题项目中有的页面打不开并且造成浏览器窗口崩溃,于是就在卡顿的页面把代码全部清空,然后一点点复原找问题,才找到问题出现在el-tabs身上,但是不知道怎么改掉,于是就上网查资料...

<template>
  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

直接说下别人的结果:

1. el-tab-pane元素内不能有内容

2. el-tabs 外面加上 el-row 以及 el-col

3. 给组件固定高度

 

但是这些在我项目中都不行后来解决方法:

由于vue(2.5.2)版本过低elment版本过高,所以才出现这个问题,只能降级了于是把elment版本降到了2.4.11,问题才解决。

参考:https://github.com/ElemeFE/element/issues/15712