使用Element-UI的el-tabs組件,瀏覽器卡住了的問題及解決
Element-UI的el-tabs組件,瀏覽器卡住
問題
我使用的版本是：vue@2.5.13、vue-template-compiler@2.5.13、element-ui@2.8.2
在一個(gè)頁面中使用了 element-ui 的 el-tabs 組件，然后，切換路由進(jìn)入這個(gè)頁面的時(shí)候，就卡住了，瀏覽器也卡住了；去掉 el-tabs 就好了，使用 el-tabs 就卡住了。
解決方案？？
1、有的說在 el-tabs 外層使用 <el-col :span="24">...</el-col> 可以解決這個(gè)問題？
<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>經(jīng)過我實(shí)踐證明，并不能。
正確的解決方案
方案一、降級(jí) element-ui 的版本到 2.6.3
首先我考慮的是升級(jí)到最新的 element-ui@2.9.2，發(fā)現(xiàn)還是不行；
于是降級(jí)到 element-ui@2.6.3，是可以的?。?！能進(jìn)到這個(gè)有 el-tabs 組件的頁面。
// 卸載原來的 npm uninstall element-ui -S // 清緩存 npm cache clean -f // 安裝 2.6.3 的版本 npm i element-ui@2.6.3 -S
方案二、升級(jí) vue 的版本到 2.6.x +
對(duì)比 element-ui@2.6.3 的文檔和最新的 element-ui@2.9.2 的文檔，以及 Github 上的 commit；發(fā)現(xiàn) 2.9.2 還是增加了很多新的功能和組件的，那如果我們很想使用 element-ui@2.9.2 的話，那么，解決方案就是升級(jí) Vue 的版本。
// 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 版本一致
切記：一定要保證 vue 和 vue-template-compiler 版本一致
重新啟動(dòng)項(xiàng)目，OK，順利進(jìn)入頁面！
好了，以上就是正規(guī)，并且親測可行的兩種解決方案啦。
小結(jié)
- 如果你是 Vue 2.5.x 的版本，那么你要降級(jí)你的 Element-UI 的版本到 2.6.x 。
- 如果你想使用最新的 Element-UI 版本，那么你需要升級(jí)你的 Vue 的版本到 Vue 2.6.x 。
說明：
在 element-ui 的 issues 中搜 el-tabs 會(huì)發(fā)現(xiàn) el-tabs 組件的問題還是挺多人問的。
Element-UI el-tabs選項(xiàng)卡踩坑記錄
el-tabs選項(xiàng)卡必須要有一個(gè)默認(rèn)選中項(xiàng)，value或v-model
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
本文分為html，js和css代碼給大家詳細(xì)介紹了vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版功能，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了使用vue2實(shí)現(xiàn)購物車和地址選配功能,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03
axios封裝，使用攔截器統(tǒng)一處理接口，超詳細(xì)的教程（推薦）
這篇文章主要介紹了axios封裝使用攔截器處理接口，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
本篇文章主要介紹了基于Vue2x的圖片預(yù)覽插件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
之前關(guān)于vsCode一鍵生成vue模，最近需要回顧，就順便發(fā)到隨筆上了，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本文主要介紹了vue中process.env的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue3+vue-cli4中使用svg的方式詳解(親測可用)
最近在做個(gè)vue的項(xiàng)目,從各種github上的開源庫上借鑒開發(fā)方法,給大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+vue-cli4中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08
詳解Vue項(xiàng)目中出現(xiàn)Loading chunk {n} failed問題的解決方法
這篇文章主要介紹了詳解Vue項(xiàng)目中出現(xiàn)Loading chunk {n} failed問題的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09