您好,登錄后才能下訂單哦!
本文實例為大家分享了vue+element tabs選項卡分頁效果的具體代碼,供大家參考,具體內(nèi)容如下
文件目錄:
功能展示:
路由配置:
{ 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: '部門設(shè)置', component: () => import('../components/view/account/department.vue'), hidden: true }, { path: '/account/all-account/role', name: '角色權(quán)限設(shè)置', 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" > <router-view /> </div> </template>
account.vue
<template> <!-- 賬號管理tab分頁 --> <div id="employeeCareMng" class="page_container" > <div v-if="isNative" > <div > <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="員工賬號" name="first" > <staff/> </el-tab-pane> <el-tab-pane label="代理人賬號" name="second" > <agent/> </el-tab-pane> <el-tab-pane label="部門設(shè)置" name="third" > <department/> </el-tab-pane> <el-tab-pane label="角色權(quán)限設(shè)置" name="fourth" > <role/> </el-tab-pane> <el-tab-pane label="城市管理" name="fifth" > <city/> </el-tab-pane> </el-tabs> </div> </div> <div v-else > <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' //默認(rèn)先渲染第一個 } }, //頁面初始默認(rèn)是第一個板塊展示 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。