element ui 左侧导航栏
- 2020 年 12 月 21 日
- 筆記
<el-menu class=”left-menu” :default-active=”$route.name” :unique-opened=”true” :collapse=”isCollapse”>
<template v-for=”(m, x) in menuOpts.data” >
<el-submenu v-if=”m.children.length && m.show” :index=”m.value” class=”level1-menu” :key=”x”>
<template slot=”title”>
<e-icon :name=”m.icon”></e-icon>
<span>{{m.label}}</span>
</template>
<el-menu-item-group v-if=”m.children.length && m.show == true”>
<template v-for=”c in m.children”>
<el-submenu v-if=”c.children && c.show == true” :index=”c.value”>
<template slot=”title”>{{c.label}}</template>
<el-menu-item class=”level2-menu submenu” v-for=”(child, s) in c.children” :key=”s” @click.native=”stateGo(child.value,1)” :index=”child.value”>{{child.label}}</el-menu-item>
</el-submenu>
<el-menu-item v-if=”!c.children && c.show == true” :index=”c.value” @click.native=”stateGo(c.value,2)” class=”level2-menu submenu”>
<template slot=”title”>
<span>{{c.label}}</span>
</template>
</el-menu-item>
</template>
</el-menu-item-group>
</el-submenu>
<el-menu-item v-if=”!m.children.length && m.show == true”
:index=”m.value” @click.native=”stateGo(m.value,0)” class=”level1-menu submenu” :key=”x”>
<e-icon :name=”m.icon”></e-icon>
<span slot=”title”>{{m.label}}</span>
</el-menu-item>
</template>
</el-menu>
数据
menuOpts: {
data: [
{
value: ‘onBoard’,
label: ‘入职管理’,
icon: ‘card’,
show: true,
children: [
{
value: ‘home’,
label: ‘入职首页’,
icon: ‘desktop’,
show: true,
},
{
value: ‘onBoard.joined’,
label: ‘已入职’,
show: true
},
{
value: ‘onBoard.history’,
label: ‘历史已入职’,
show: true
}
]
},
{
value: ‘renewal’,
label: ‘合同续签’,
icon: ‘card’,
show: true,
children: [
{
value: ‘renewal.waiting’,
label: ‘待续签’,
show: true
},
{
value: ‘renewal.joined’,
label: ‘已续签’,
show: true
},
{
value: ‘renewal.unjoined’,
label: ‘未续签’,
show: true
},
]
},
{
value: ‘system’,
label: ‘系统配置管理’,
icon: ‘setting’,
show: true,
children: [
{
value: ‘system.tenant’,
label: ‘租户定义’,
show: true,
},
{
value: ‘system.renewal’,
label: ‘合同续签’,
show: true,
children: [
{
value: ‘system.renewal.material’,
label: ‘资料配置’,
show: true
},
]
},
{
value: ‘system.leave’,
label: ‘离职管理’,
show: true,
children: [
{
value: ‘system.leave.material’,
label: ‘资料配置’,
show: true
},
]
},
]
}
],
active: ‘home’
}
