Today, the work encountered a problem:
Demand Background: There are several pages tab, the need to control tab label according to user authority to display and hide.
<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>
Solution one: because the front end with a VUE framework, see the demand, the first thought is to use the v-show to solve, but in actual operation, v-show did not achieve the desired results.
v-show: through the display: to hide none / block / display <el-tab-pane> tag contents inside, but by itself does not hide the tab label.
And doing so there is a downside: the following figure, I am "User management," added the v-show = false, this time under "User Management" tab labels are not displayed,
When I click "Configuration Management" tab, and then click "User Management" tab, guess what happens? Under "User Management" tab displays, but I obviously with v-show hidden.
The reason is simple, switch tabs actually ElementUI control display: none / block to achieve, when you switch from the "Configuration Management" tab back to "User management" tab,
style attribute "User Management" tab will refresh to display: block. Use in combination with extremely unfriendly Echarts chart.
<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>
Solution two: After using v-if tag to control tab displaying and hiding, this time to reach the desired effect.
Just when I want to submit code, the console ruthless gave me a slap, how anxious a guy thing ah, press F12 to open the console to see his aging mother to send you a message:
Duplicate keys detected: 'tab-xxx'. This may cause an update error.
This phrase probably means is to tell you: you is <el-tab-pane> xxx in the name attribute value of key repeat, if you do non, that any action on this label you will not updates inside.
Is the value represented by xxx <el-tab-pane> in the name attribute. For example <el-tab-pane name = "first">
Steps to reproduce the problem:
Defines an array, beginning inside the store are true, that is, when just entering the page the following four tags are displayed
this.test = [true,true,true,true]；
Then get the user name and login user rights in VUE mounted function, the re-assignment to the array
Guo Jing heroes such as the user's permission to access the user management are only label, then test = [true, false, false, false];
Then refresh the page will error, the problem is solved, but the exact cause I only know about, is not very clear, know little friends leave a message, right 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>
Option II hit the face of the Third solution: add key values for each tab manually tag
<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>
to sum up:
1. If the program error Duplicate keys detected:.. 'Tab -xxx' This may cause an update error if eight is key repeat, first check the v-for circulation of the key in question
2. Do not use the v-show as much as possible in the control tag <el-tab-pane> display, and if used with Echarts chart, then there would be very unfriendly, as to why I do not say, if the pit naturally understand Kazakhstan.
3. <el-tab-pane> using v-if key duplication may occur, which can cause this tab can not be updated, if this problem is not solved, the same Echarts chart is not updated after this issue is resolved can be updated inside content.
I personally think that this solution is not very good, I hope someone can come up with better methods, inadequate please pointing, if reproduced, please attach a link to the original article at the beginning of the article.