升級element-ui后,tabs標簽頁導致頁面卡死 和 Duplicate keys detected: ''. This may cause an update error.


一、升級element-ui后,tabs標簽頁導致頁面卡死 

1、網上查過資料(不可取):

<el-col>
    <el-row>
        <el-tab>
     ...
     </el-tab>
   </el-row> </el-col>
// 注:並不能生效

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="用戶管理" name="first">(不能插入代碼</el-tab-pane>
</el-tabs>
// 注:這種方法可行,但是非人類,不可取

2、研究半天資料之后的原因很簡單:Vue版本太低了,element-ui升級后Vue版本不夠導致的,

  本人為例,原版本:Vue是2.5.10,element-ui是2.4.11,升級后新版本:Vue升到2.6.10,element-ui升到2.13.2

 完美解決了問題。

 升級方法:yarn upgrade vue@2.5.10  (element-ui類同, 感覺yarn比gulp更快速,更規范,只需要全局安裝一下yarn即可)

 注:還有一個坑需要注意,就是在打包的時候可能會報錯,因為單獨升級了Vue組件,其配套的依賴也需要升級

   vue-template-compiler 就是這個依賴也要升級,升到2.6.10,如果升級失敗,可以先到中間版本再升級

 

二、Duplicate keys detected: ''. This may cause an update error.

原因:造成這個錯誤原因就是唯一標識符key出現重復了,

1、如果是v-for循環,這個很好解決,直接有index下標序號來作為key值可以解決。

2、如果是其他組件,如element中,table樹形折疊數據 唯一標識 row-key, 這個標識可以是自定義函數,也可以遍歷數據添加唯一字段作為標識

   如果還是出問題,看看你表格渲染出來的數據,是不是折疊里和外面都渲染出同一個數據,這是數結構出問題了。

   數據結構嚴格按照實例來,row-key可以是數字可以是字符串,子數據children(可自定義),但不允許chlidren同級對象字段中還有children字段;

   注:可以模擬最簡單的數據格式來顯示,看看會不會報錯,再來糾正實際數據


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM