一、升級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字段;
注:可以模擬最簡單的數據格式來顯示,看看會不會報錯,再來糾正實際數據