本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。