超级好用的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",
                            "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>