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图表不会更新，这个问题解决后就就可以更新里边的内容了。
原文：https://www.cnblogs.com/csl96/archive/2019/09/04/11460279.html
1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入
2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入
3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入
链接: http://www.fly63.com/article/detial/5137
- 发表于 2021-02-22 11:10
- 阅读 ( 358 )
- 分类：互联网
