这篇文章主要为大家详细介绍了vue+element tabs选项卡分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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
<div class="page_container" style="overflow:auto;height:100%;background: #ffffff;padding: 10px;min-width:1200px"> </div>
account.vue
<!-- 账号管理tab分页 --><div id="employeeCareMng" class="page_container" style="overflow:auto;height:100%;background: #ffffff;min-width:1200px"> <div> <div style="height:100%"> </div></div><div style="height:100%"> </div></div> .page_container{ background: #ffffff; height: 100%; } #employeeCareMng .el-tabs__content { height:calc(100% - 55px); }
其他tabs分页的组件：
staff.vue 其他类似
<div class="staff"> 员工账号 </div>
以上就是vue+element tabs选项卡分页效果的详细内容，更多请关注本文来源gaodai$ma#com搞$$代**码)网8gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue+element tabs选项卡分页效果
转载请注明原文链接：vue+element tabs选项卡分页效果
