关于elementUI中Tabs组件使用v-if隐藏tab后剩余tab不显示内容的解决方案

72 阅读 0 评论 48 点赞

我是靠谱客的博主高贵香烟，最近开发中收集的这篇文章主要介绍关于elementUI中Tabs组件使用v-if隐藏tab后剩余tab不显示内容的解决方案，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

关于elementUI中Tabs组件使用v-if隐藏tab后剩余tab不显示内容的解决方案

我们在使用elementUI的Tabs的时候有时候会这样用

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane v-if="checkTab('first')" label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane v-if="checkTab('second')" label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane v-if="checkTab('third')" label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane v-if="checkTab('fourth')" label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      checkTab(tabName) {
      	//判断逻辑
      	if(...)
      	return true 
      	if(...)
      	return false
      }
    }
  };
</script>

此时如果判断逻辑中隐藏了第二个tab，那整个Tabs就会没有任何tab显示在前台，所有tab都变为未选中的状态，需要点击一下后才能显示内容

解决方案如下：

<template>
  <el-tabs v-model="activeName" ref=tabs>
    <el-tab-pane v-if="checkTab('first')" label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane v-if="checkTab('second')" label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane v-if="checkTab('third')" label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane v-if="checkTab('fourth')" label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      checkTab(tabName) {
      	//判断逻辑
      	if(tabName == 'first'){
      	 var self = this 
      	 setTimeout(()=>{//手动设置显示的tab
			that.$refs['tabs'].setCurrentName(tabName)
		 })
      	}
      	if(...)
      	return true 
      	if(...)
      	return false
      }
    }
  };