溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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" > <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="部門設置" name="third" >
<department/>
</el-tab-pane>
<el-tab-pane label="角色權限設置" 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' //默認先渲染第一個
}
},
//頁面初始默認是第一個板塊展示
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
