<template>
<div>
<el-menu
@select="selectMenu"
:default-active="currentIndexLight"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
:router="startRouter"
active-text-color="#ffd04b"
>
<!--
:default-openeds="arrIndex"
-->
<div v-for="item in menuList" :key="item.path">
<!-- 沒有子菜單 -->
<template v-if="item.children && item.children.length == 0">
<el-menu-item :index="item.path">
<i class="el-icon-menu"></i>
{{item.title}}
</el-menu-item>
</template>
<!-- 有子菜單 -->
<el-submenu v-else :index="item.path">
<template slot="title">
<i class="el-icon-menu"></i>
{{item.title}}
</template>
<template v-for="child in item.children">
<!-- 這里是類似遞歸循環 -->
<sidebar-item
v-if="child.children&&child.children.length>0"
:item="child"
:key="child.path"
/>
<el-menu-item v-else :key="child.path" :index="child.path">
<i class="el-icon-location"></i>
{{child.title}}
</el-menu-item>
</template>
</el-submenu>
</div>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
startRouter: true,//開啟路由標識， ，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉
currentIndexLight: '',//當前激活菜單的 index 高亮顯示
arrIndex: [],
menuList: [
{
"path": "/awaitdoing", //菜單項所對應的路由路徑
"title": "功能1", //菜單項名稱
"children": [] //是否有子菜單，若沒有，則為[]
},
{
"path": "/quickset",
"title": "功能2",
"children": []
},
{
"path": "aa",
"title": "功能3",
"children": [
{
"path": "/awaitdo",
"title": "功能3-1",
"children": []
},
{
"path": "/alreadygreen",
"title": "功能3-2",
"children": []
},
{
"path": "/approvedby",
"title": "功能3-3",
"children": []
},
]
},
{
"path": "/func10",
"title": "功能10",
"children": []
}
]
}
},
methods: {
selectMenu(key, keyPath) {
console.log(key, keyPath)
this.currentIndexLight = key;
},
// 展開指定的 sub-menu
handleOpen(key, keyPath) {
console.log('展開的時候觸發', key, keyPath);
},
// 收起指定的 sub-menu
handleClose(key, keyPath) {
console.log('收起的時候觸發', key, keyPath);
}
}
}
</script>
