升级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字段;

   注:可以模拟最简单的数据格式来显示,看看会不会报错,再来纠正实际数据

原文地址:https://www.cnblogs.com/cp-cookie/p/13275020.html