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

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