v-if 切换 el-tabs 加载 ECharts 错误问题（二）

一、问题描述：

        vue项目在使用elementUI的el-tabs组件时，通过v-if切换两个tabs，当tabsA和tabsB中有相同name的tab时会报错：

Duplicate keys detected: 'tab-xxx'. This may cause an update error. 

        当两个tabs中tab-pane的数量不一致，但是name有相同项时，总是会报最后一个相同name的错误，

二、分析：

        这就是通过v-if切换两个相同的组件时，会出现组件复用，局部卸载的问题；

        局部dom没有更新，复用了相同的tab-pane，所以tab报错；

三、解决办法：

        当通过v-if切换两个相同组件时，给组件添加key，这样就可以完全销毁了。即通过给每一个tab-pane添加key值。

<el-tab-pane label="CPU" key="a_CPU" name="CPU">.......</el-tab-pane>
<el-tab-pane label="GPU" key="a_GPU" name="GPU">........</el-tab-pane>

注意：

        官方不推荐使用index作为key，因为index是不确定的值，它会根据数组的更改而更改，有坑，所以最好不要用index做key。