ElementUI使用v-if控制tab標簽顯示遇到的Duplicate keys detected: 'xxx'
今天工作遇到一個問題：
需求背景：頁面中有幾個tab，需要根據登錄用戶的權限控制tab標簽的顯示與隱藏 。
<el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" >
<el-tab-pane label="用戶管理" name="first" ref="first" >...</el-tab-pane>
<el-tab-pane label="配置管理" name="second" ref="second">...</el-tab-pane>
<el-tab-pane label="角色管理" name="third" ref="third">...</el-tab-pane>
<el-tab-pane label="定時任務補償" name="fourth" ref="fourth" >...</el-tab-pane>
</el-tabs>
解決方案一：由於前端用的是VUE框架，看到需求，第一個想到的是使用v-show來解決，但是在實際操作中，v-show並沒有達到預期效果。
v-show:是通過display:none/block來隱藏/顯示<el-tab-pane>標簽里邊的內容的，但本身並不會隱藏該tab標簽。
而且這樣做還有一個弊端：如下圖，我在“用戶管理”添加了v-show=false，此時“用戶管理”tab標簽下的內容沒有顯示，
當我點擊“配置管理”標簽，然后再點“用戶管理”標簽，猜猜會發生什么?“用戶管理”標簽下的內容顯示了，可是我明明用v-show隱藏了。
原因其實很簡單，標簽的切換實際上ElementUI是控制display:none/block來實現的，當你從“配置管理”標簽切換回“用戶管理”標簽，
“用戶管理”標簽的style屬性會重新刷新為display:block。與Echarts圖表結合使用極為不友好。
<el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" >
<el-tab-pane v-show="false" label="用戶管理" name="first" ref="first" >...</el-tab-pane>
<el-tab-pane label="配置管理" name="second" ref="second">...</el-tab-pane>
<el-tab-pane label="角色管理" name="third" ref="third">...</el-tab-pane>
<el-tab-pane label="定時任務補償" name="fourth" ref="fourth" >...</el-tab-pane>
</el-tabs>
解決方案二：之后使用v-if來控制tab標簽的顯示與隱藏，這次達成了預期效果。
正當我要提交代碼時，控制台無情的給了我一巴掌，小伙咋急個嘛呀，按F12打開控制台，看看老娘給你發的消息：
Duplicate keys detected: 'tab-xxx'. This may cause an update error.
這句話的大概意思就是告訴你：你的是<el-tab-pane>中name屬性值為xxx的key重復了，如果你非要這樣做，那你的任何關於這個標簽的操作都不會更新里邊的內容。
xxx所代表的就是<el-tab-pane>中name屬性的值。比如<el-tab-pane name="first">
問題步驟重現：
定義了一個數組，剛開始里邊存的都是true，也就是剛進入頁面的時候下面4個標簽都是顯示的
this.test = [true,true,true,true]；
然后在VUE mounted函數里獲取登錄用戶的用戶名及權限，來重新給數組賦值
比如用戶郭靖大俠的權限是只能訪問用戶管理標簽，那么test = [true，false，false，false]；
然后刷新頁面就會報錯，問題是解決了，但具體原因我只知道個大概，不是很清楚，知道的小伙伴留個言吧o(^▽^)o
<el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" >
<el-tab-pane v-if="test[0]" label="用戶管理" name="first" ref="first" >...</el-tab-pane>
<el-tab-pane v-if="test[1]" label="配置管理" name="second" ref="second">...</el-tab-pane>
<el-tab-pane v-if="test[2]" label="角色管理" name="third" ref="third">...</el-tab-pane>
<el-tab-pane v-if="test[3]" label="定時任務補償" name="fourth" ref="fourth" >...</el-tab-pane>
</el-tabs>
打臉方案二之解決方案三：為每一個tab標簽手動添加key值
<el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" >
<el-tab-pane :key="0" label="用戶管理" name="first" ref="first" >...</el-tab-pane>
<el-tab-pane :key="1" label="配置管理" name="second" ref="second"></el-tab-pane>
<el-tab-pane :key="2" label="角色管理" name="third" ref="third"></el-tab-pane>
<el-tab-pane :key="3" label="定時任務補償" name="fourth" ref="fourth" ></el-tab-pane>
</el-tabs>
總結：
1.如果程序報錯Duplicate keys detected: 'tab-xxx'. This may cause an update error.八成是key重復了，首先檢查一下v-for循環的key是否有問題
2.在<el-tab-pane>盡量不使用v-show控制標簽的顯示，如果和Echarts圖表一起使用的話會極為不友好的，至於為什么我就不多說了，如果坑的自然明白哈。
3.在<el-tab-pane>使用v-if可能會出現key重復問題，這樣會導致這個tab無法更新，如果這個問題不解決，同樣Echarts圖表不會更新，這個問題解決后就就可以更新里邊的內容了。
我個人認為這個解決方案並不是很好，希望有人能提出更好的方法，不足之處請大家指點，如果轉載請在文章開頭附上原文章鏈接。