Today's work encounters a problem:

Requirement Background: There are several tabs in the page, which need to be controlled to display and hide tabs according to the rights of the logged-in user.

 <el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" >
        <el-tab-pane label="user management" name="first" ref="first" >...</el-tab-pane>
        <el-tab-pane label="configuration management" name="second" ref="second">...</el-tab-pane>
        <el-tab-pane label="Role management" name="third" ref="third">...</el-tab-pane>
        <el-tab-pane label="Timing Task Compensation" name="fourth" ref="fourth" >...</el-tab-pane>
</el-tabs>

Solution 1: Because the front end uses VUE framework, the first thought is to use v-show to solve the requirements, but in practice, v-show has not achieved the desired results.

v-show: Hide/display the contents of the <el-tab-pane> tag through display:none/block, but it does not hide the tab tag itself.

And there's another drawback: as shown below, I added v-show=false to User Management, when the content under the tab "User Management" is not displayed.

When I click on the Configuration Management tab and then click on the User Management tab, guess what happens? The content under the User Management tab is displayed, but I hide it with v-show.

The reason is simple. The element UI actually controls display:none/block, when you switch from configuration management label to user management label.

The style attribute of the User Management tab is refreshed to display:block. It's very unfriendly to use it in conjunction with Echarts charts.

 <el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" >
        <el-tab-pane v-show="false" label="user management" name="first" ref="first" >...</el-tab-pane>
        <el-tab-pane label="configuration management" name="second" ref="second">...</el-tab-pane>
        <el-tab-pane label="Role management" name="third" ref="third">...</el-tab-pane>
        <el-tab-pane label="Timing Task Compensation" name="fourth" ref="fourth" >...</el-tab-pane>
</el-tabs>

Solution 2: Then use v-if to control the display and hiding of tab tags, which achieves the desired effect.

Just as I was about to submit the code, the console gave me a heartless slap. What's the boy's hurry? Press F12 to open the console and see the message that the old woman sent you:

Duplicate keys detected: 'tab-xxx'. This may cause an update error. 

The general meaning of this sentence is to tell you that your key with the name attribute value xxx in <el-tab-pane> repeats, and if you have to do so, no operation on this tag will update the contents.

xxx represents the value of the name attribute in < el-tab-pane >. For example <el-tab-pane name= "first">

Reproduction of problem steps:

It defines an array, which is true at first, that is to say, when you first enter the page, the following four tags are displayed.

this.test = [true,true,true,true]；

Then in the VUE mounted function, the user name and privileges of the logged-in user are obtained to re-assign the array.

For example, user Guo Jing's authority is to access user management labels only, then test = true, false, false;

Then refresh the page will report errors, the problem is solved, but the specific reason I only know about the general, not very clear, know the little partner leave a message o(^^)

<el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" >
        <el-tab-pane v-if="test[0]" label="user management" name="first" ref="first" >...</el-tab-pane>
        <el-tab-pane v-if="test[1]" label="configuration management" name="second" ref="second">...</el-tab-pane>
        <el-tab-pane v-if="test[2]" label="Role management" name="third" ref="third">...</el-tab-pane>
        <el-tab-pane v-if="test[3]" label="Timing Task Compensation" name="fourth" ref="fourth" >...</el-tab-pane>
</el-tabs>

Solution 3: Manually add key value for each tab tag

 <el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" >
        <el-tab-pane :key="0" label="user management" name="first" ref="first" >...</el-tab-pane>
        <el-tab-pane :key="1" label="configuration management" name="second" ref="second"></el-tab-pane>
        <el-tab-pane :key="2" label="Role management" name="third" ref="third"></el-tab-pane>
        <el-tab-pane :key="3" label="Timing Task Compensation" name="fourth" ref="fourth" ></el-tab-pane>
</el-tabs>

Summary:

1. If the program reports a Duplicate keys detection:'tab-xxx'. This may cause an update error. Eighty percent of the keys are repeated, first check the key of the v-for loop for any problems.

2. In <el-tab-pane> try not to use the display of v-show control label. If it is used with Echarts chart, it will be very unfriendly. As for why I will not say much, if the pit nature understands Kazakhstan.

3. The use of v-if in <el-tab-pane> may cause a key duplication problem, which will lead to the tab can not be updated. If this problem is not solved, the Echarts chart will not be updated, and the contents can be updated after this problem is solved.

Personally, I don't think this solution is very good. I hope someone can come up with a better solution. If you want to reproduce it, please attach a link to the original article at the beginning of the article.