vue+element tabs选项卡分页

文件目录：

功能展示：

路由配置：

{
    path: '/account',
    component: ()=> import('../components/home/home.vue'),   //布局页面
    redirect: '/account/all-account/list',  //定向到list路径
    name: '账号管理',
    children: [
      {
        path: '/account/all-account/list',
        redirect: '/account/all-account/staff',  //定向到staff路径
        name: '员工管理',
        component: () => import('../components/view/account/index.vue'),
        children: [
          {
            path: '/account/all-account/staff',
            component: () => import('../components/view/account/account.vue'),
            hidden: true
          },
          {
            path: '/account/all-account/agent',
            name: '代理人账号',
            component: () => import('../components/view/account/agent.vue'),
            hidden: true
          },
          {
            path: '/account/all-account/department',
            name: '部门设置',
            component: () => import('../components/view/account/department.vue'),
            hidden: true
          },
          {
            path: '/account/all-account/role',
            name: '角色权限设置',
            component: () => import('../components/view/account/role.vue'),
            hidden: true
          },
          {
            path: '/account/all-account/city',
            name: '城市管理',
            component: () => import('../components/view/account/city.vue'),
            hidden: true
          },
        ]
      },
}

组件代码：

index.vue

<template>
  <div class="page_container" style="overflow:auto;height:100%;background: #ffffff;padding: 10px;min-width:1200px;">
    <router-view />
  </div>
</template>

account.vue

<template>
<!-- 账号管理tab分页 -->
  <div id="employeeCareMng" class="page_container" style="overflow:auto;height:100%;background: #ffffff;min-width:1200px;">
    <div v-if="isNative" >
      <div style="height:100%;">
        <el-tabs v-model="activeName" style="height:100%;" @tab-click="handleClick">
          <el-tab-pane label="员工账号" name="first" style="height:100%;">
            <staff/>
          </el-tab-pane>
          <el-tab-pane label="代理人账号" name="second" style="height:100%;">
            <agent/> 
          </el-tab-pane>
          <el-tab-pane label="部门设置" name="third" style="height:100%;">
            <department/> 
          </el-tab-pane>
          <el-tab-pane label="角色权限设置" name="fourth" style="height:100%;">
            <role/> 
          </el-tab-pane>
           <el-tab-pane label="城市管理" name="fifth" style="height:100%;">
            <city/> 
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div v-else style="height:100%;">
      <router-view />
    </div>
  </div>
</template>
<script>
import staff from './staff'
import agent from './agent'
import department from './department'
import role from './role'
import city from './city'

export default {
  components: {
    staff,agent,department,role,city
  },
  data() {
    return {
      isNative: true,
      activeName: 'first'  //默认先渲染第一个
    }
  },
  //页面初始默认是第一个板块展示
  created() {
    if (this.$route.path === '/account/all-account/staff') {
      this.isNative = true
    } else {
      this.isNative = false
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style scoped>
.page_container{
    background: #ffffff;
    height: 100%;
}
</style>
<style >
#employeeCareMng .el-tabs__content {
  height:calc(100% - 55px);
}
</style>

其他tabs分页的组件：

staff.vue  其他类似

<template>
    <div class="staff">
      员工账号
    </div>
</template>

<script>
export default {
    name:"staff",
    data(){
        return {
            
        }
    },
    created(){
        
    },
    methods: {
   
    },
     
    
};
</script>

<style scoped>

</style>