超级好用的elementui动态循环菜单

<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>