vue+element tabs选项卡分页

超、凢脫俗 2023-10-09 11:19 25阅读 0赞

### 文件目录： ###

![20190925103313470.png][]

### 功能展示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

![20190925105324903.png][]

### 路由配置： ###

{
        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**

**account.vue**

<template>
    
      <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>

[20190925103313470.png]: https://img-blog.csdnimg.cn/20190925103313470.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925105341788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70
[20190925105324903.png]: https://img-blog.csdnimg.cn/20190925105324903.png