<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",{
"path": "/approvedby","title": "功能3-3",]
},{
"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('收起的时候触发',keyPath);
}
}
}
</script>
原文地址：https://www.cnblogs.com/IwishIcould
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。