使用 Element-UI 的 el-tabs 组件，浏览器卡住了

向右看齐 2022-01-05 10:19 915阅读 0赞

### 使用 Element-UI 的 el-tabs 组件，浏览器卡住了 ###

*  问题
 *  正确的解决方案
 *   *  方案一、降级 \`element-ui\` 的版本到 \`2.6.3\`
     *  方案二、升级 vue 的版本到 2.6.x +
 *  总结
 *  说明

# 问题 #

我使用的版本是：vue@2.5.13、vue-template-compiler@2.5.13、element-ui@2.8.2

在一个页面中使用了 `element-ui` 的 `el-tabs` 组件，然后，切换路由进入这个页面的时候，就卡住了，浏览器也卡住了；去掉 `el-tabs` 就好了，使用 `el-tabs` 就卡住了。

解决方案？？

1、有的说在 `el-tabs` 外层使用 `<el-col :span="24">...</el-col>` 可以解决这个问题？

<el-row>
    	<el-col :span="24">
    		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    			<el-tab-pane label="基本信息" name="first">
                	<h3 class="title">基本信息</h3>
                  	sss
              	</el-tab-pane>
    		</el-tabs>
    	</el-col>
    </el-row>

经过我实践证明，并不能。

# 正确的解决方案 #

## 方案一、降级 `element-ui` 的版本到 `2.6.3` ##

首先我考虑的是升级到最新的 `element-ui@2.9.2`，发现还是不行；  
于是降级到 `element-ui@2.6.3`，是可以的！！！能进到这个有 `el-tabs` 组件的页面。

// 卸载原来的
    npm uninstall element-ui -S
    // 清缓存
    npm cache clean -f
    // 安装 2.6.3 的版本
    npm i element-ui@2.6.3 -S

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 1]

## 方案二、升级 vue 的版本到 2.6.x + ##

对比 element-ui@2.6.3 的文档和最新的 element-ui@2.9.2 的文档，以及 Github 上的 commit；发现 2.9.2 还是增加了很多新的功能和组件的，那如果我们很想使用 element-ui@2.9.2 的话，那么，解决方案就是升级 Vue 的版本。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 2]

// 1、卸载 vue (连带 vue-template-compiler 一起卸载，不要问为什么，要问的话就加群)
    npm uninstall vue vue-template-compiler
    // 清缓存
    npm cache clean -f
    // 安装 vue
    npm i vue@2.6.10 vue-template-compiler@2.6.10

切记：一定要保证 vue 和 vue-template-compiler 版本一致

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 3]

切记：一定要保证 vue 和 vue-template-compiler 版本一致

重新启动项目，OK，顺利进入页面！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 4]

好了，以上就是正规，并且亲测可行的两种解决方案啦。

# 总结 #

*  如果你是 `Vue` `2.5.x` 的版本，那么你要降级你的 `Element-UI` 的版本到 `2.6.x` 。
 *  如果你想使用最新的 `Element-UI` 版本，那么你需要升级你的 `Vue` 的版本到 `Vue 2.6.x` 。

# 说明 #

在 `element-ui` 的 `issues` 中搜 `el-tabs` 会发现 `el-tabs` 组件的问题还是挺多人问的。

\---------------------------(正文完)\------------------------------------  
一个前端的学习交流群，想进来面基的，可以点击这个logo![Vue学习交流][Vue]，或者手动search群号：685486827，或者 qq 扫一扫

![Vue学习交流][Vue 1]

写在最后： 约定优于配置-------软件开发的简约原则.  
\-------------------------------- (完)\--------------------------------------

我的：  
个人网站： [https://neveryu.github.io/neveryu/][https_neveryu.github.io_neveryu]  
Github： [https://github.com/Neveryu][https_github.com_Neveryu]  
新浪微博： [https://weibo.com/Neveryu][https_weibo.com_Neveryu]

更多学习资源请关注我的新浪微博…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70]: /images/20211229/b72db7a146804b4782775df10eacd121.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 1]: /images/20211229/8fabc4c4a0634b0c8680dab2d8dbb033.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 2]: /images/20211229/1141040fc84a4bd99b41a0416693f1a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 3]: /images/20211229/22c7beed1a6e4baf9c3624a9ce9c5317.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 4]: /images/20211229/daadb07c2d894593beb88d242d44eaf6.png
[Vue]: /images/20211229/a46aae1b62b54983a76ed3198a598adc.png
[Vue 1]: /images/20211229/0ad35bdd04b94339860ffe80565dd0df.png
[https_neveryu.github.io_neveryu]: https://neveryu.github.io/neveryu/
[https_github.com_Neveryu]: https://github.com/Neveryu
[https_weibo.com_Neveryu]: https://weibo.com/Neveryu