element-ui显示和隐藏某个tab标签

客官°小女子只卖身不卖艺 2022-09-05 05:19 535阅读 0赞

>  <el-tabs v-model="activeName" ref="tabs">  
>                 <el-tab-pane label="基本信息1" name="first"  >   基本信息</el-tab-pane>
> 
>                <el-tab-pane label="基本信息2" name="second"  >   基本信息</el-tab-pane>
> 
>                <el-tab-pane label="基本信息3" name="third"  >   基本信息</el-tab-pane>
> 
>  </el-tabs>

> mounted() \{
> 
>   
>         //tab标签的权限控制  
>         this.$nextTick(() => \{
> 
> //首先把所有的都隐藏  
>             this.$refs.tabs.$children\[0\].$refs.tabs\[0\].style.display = 'none';  
>             this.$refs.tabs.$children\[0\].$refs.tabs\[1\].style.display = 'none';  
>             this.$refs.tabs.$children\[0\].$refs.tabs\[2\].style.display = 'none';  
>               
>             if(this.hasPower('100103'))\{ //判断条件如果为真就显示  
>                 this.$refs.tabs.$children\[0\].$refs.tabs\[2\].style.display = 'inline-block';  
>                 this.activeName="third";//标签默认显示的 ！！！！必须写这个。不然出现标签2，显示的内容是1的情况  
>             \}  
>               
>             if(this.hasPower('100102'))\{  
>                 this.$refs.tabs.$children\[0\].$refs.tabs\[1\].style.display = 'inline-block';  
>                 this.activeName="second";  
>             \}  
>             if(this.hasPower('100101'))\{  
>                 this.$refs.tabs.$children\[0\].$refs.tabs\[0\].style.display = 'inline-block';  
>                 this.activeName="first";  
>             \}  
>               
>         \});  
>     \}

我的三个标签的判断是先是第三个再第二个，再第一个。如果按顺序一二三的判断就会出现，如果显示2,3标签。此时默认选中的就是3.很显然。我们希望的是显示2的。所以判断要从后往前。