vue+element tabs选项卡分页效果
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:layui实现根据table数据判断按钮显示情况的方法