今天工作遇到一个问题:

需求背景:页面中有几个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图表不会更新,这个问题解决后就就可以更新里边的内容了。

我个人认为这个解决方案并不是很好,希望有人能提出更好的方法,不足之处请大家指点,如果转载请在文章开头附上原文章链接。

ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx'问题的更多相关文章

  1. NgStyle和NgIf控制HTML标签显示的区别

    通常web开发者会选择将元素样式属性display设为none来隐藏目标元素.采用这种方式,这些元素虽然不可见却仍然保存在DOM中,这样带来的好处是,如果元素不久就需要再次显示,组件不需要重新被初始化 ...

  2. [转]Form中控制Tab画布不同标签间切换的方法

    转自:http://yedward.net/?id=68 Form中一般常用的画布类型包括content.stacked.tab这三种,其实content类型的画布是每一个form都必须有的,而且只能 ...

  3. tab标签切换(无炫效果,简单的显示隐藏)

    从最简单的效果开始写起,一个简单的JQ写出tab切换效果,很静态,没有任何的轮转特效,单纯的点击标签显示区域块. 附上代码: HTML: <div class="wrapper&quo ...

  4. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  5. Android(java)学习笔记129:Tab标签的使用

    1.案例1---TabProject (1)首先是main.xml文件: <?xml version="1.0" encoding="utf-8"?> ...

  6. Bootstrap V3使用Tab标签

    Bootstrap V3使用Tab标签 >>>>>>>>>>>>>>>>>>>> ...

  7. Android UI--ViewPager扩展Tab标签指示

    Android UI--ViewPager扩展Tab标签指示 2013年8月30日出来冒冒泡 ViewPager这个控件已经不算是陌生的了,各种玩Android的小伙伴们都有发表相应的文章来讲它.我看 ...

  8. Android(java)学习笔记71:Tab标签的使用

    1. 案例1---TabProject (1)首先是main.xml文件: <?xml version="1.0" encoding="utf-8"?&g ...

  9. TabActivity中的Tab标签详细设置

    参考链接: http://www.iteye.com/topic/602737 这个写的很不错,我是跟着一步步写下来的,不过到最后也遇到了麻烦,就是不能将Tab标签的文字和图片分开,始终是重合的,而且 ...

随机推荐

  1. JSP使用分层实现业务处理

    在Java开发中,使用JDBC操作数据库的四个步骤如下:   ①加载数据库驱动程序(Class.forName("数据库驱动类");)   ②连接数据库(Connection co ...

  2. python基础学习(起步)

    目录 python基础学习(起步) 变量 常量 变量的内存管理 python垃圾回收机制 变量的其他赋值方式 今日编程小题 本人能力有限,若有偏颇之处请读者大大不吝赐教! 祝大家每天都在成长! pyt ...

  3. 05-k8s调度器、预选策略、优选函数

    目录 k8s调度器.预选策略.优选函数 节点选择过程 调度器 预选策略 优选函数 高级调度设置机制 node选择器/node亲和调度 pod亲和性 污点调度 Taints 与 Tolerations ...

  4. Ubuntu启动Apache

    划重点:最重要的是找到一个文件--------startup.sh 如果你是按照百度上的方法下载的Apache2,那么就按照百度的方式来 但是异曲同工 如果你是自己在网上下载的Apache到的磁盘 找 ...

  5. 详解 git 忽略文件 删除远端仓库的文件

    要解决的问题 忽略指定类型的文件 或 某个指定文件(夹) 将已经push到github的文件删除, 但本地的文件不删除 (写忽略规则之前就把这个文件夹push了 T_T ) 将想要忽略掉的文件的相关记 ...

  6. Micropython TPYBoard v102 温湿度短信通知器(基于SIM900A模块)

    前言 前段时间看了追龙2,感受就是如果你是冲着追龙1来看追龙2的话,劝你还是不要看了,因为追龙2跟追龙1压根没什么联系,给我的感觉就像是看拆弹专家似的,估计追龙2这个名字就是随便蹭蹭追龙1的热度来的. ...

  7. 作为前端的你,CC游戏开发可以上车

    1. 初来乍到 打开 Cocos Creator 点击新建空白项目,在默认布局的左下区域,一个黄黄assets文件夹映入眼帘.作为前端的你对这个文件是不是再熟悉不过了.是的,和你想象的一样,开发游戏中 ...

  8. 最基础的 ant build 脚本

    最基础的 ant build 脚本,根据项目,自行进行修改 <?xml version="1.0" encoding="UTF-8" ?> < ...

  9. Java学习多线程第一天

    内容介绍 Thread 线程创建 线程池 线程状态图 1 多线程 1.1     多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念. 进程:进程指正在运行的程序.确切的来说,当一个程序 ...

  10. 冬天苹果笔记macbookpro消除静电的方法

    冬天mac除静电的方法 1.mac虽然声称不需要关机,但和apple技术人员沟通后,还是需要1周进行一次关机操作 2.知乎上的回答:https://www.zhihu.com/question/195 ...