C/C++教程

ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx' 数据主键key重复

本文主要是介绍ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx' 数据主键key重复,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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/p/11460279.html
这篇关于ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx' 数据主键key重复的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!