elementui v-for el-menu 任意多级菜单

父组件：Nav.vue

<template>
    <div>
        <el-menu
                default-active="1"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <!-- 引入组件 -->
            <MenuTree :menuData="menuList"></MenuTree>
        </el-menu>
    </div>
</template>

<script>
    import {reactive, ref, isRef, toRefs, onMounted, watch, onUnmounted} from '@vue/composition-api';
    import MenuTree from "../../../components/MenuTree";

    export default {
        name: "Nav",
        components: {
            MenuTree: MenuTree
        },
        setup({root, refs,}, props) {
            const isCollapse = ref(true);

            const menuData = reactive('menuData')
            const menuList = reactive([{
                index: "1",
                name: "1",
                icon: 'el-icon-s-order',
                children: [{
                    index: "2",
                    name: "1-2",
                    icon: 'el-icon-s-order',
                    children: [{
                        index: "3",
                        name: "1-2-1",
                        icon: 'el-icon-s-order',
                    }, {
                        index: "4",
                        name: "1-2-2",
                        icon: 'el-icon-s-order',
                        children: [{
                            index: "5",
                            name: "1-2-2-1",
                            icon: 'el-icon-s-order',
                        }, {
                            index: "6",
                            name: "1-2-2-2",
                            icon: 'el-icon-s-order',
                            children: [{
                                index: "7",
                                name: "1-2-2-2-1",
                                icon: 'el-icon-s-order',
                            },{
                                index: "8",
                                name: "1-2-2-2-2",
                                icon: 'el-icon-s-order',
                            }]
                        }]
                    }],
                }]
            }, {
                index: "9",
                name: "2",
                icon: 'el-icon-s-order',
            }, {
                index: "10",
                name: "3",
                icon: 'el-icon-s-order',
            }, {
                index: "11",
                name: "4",
                icon: 'el-icon-s-order',
            }])


            const handleOpen = ((key, keyPath) => {
                console.log(key, keyPath);
            })

            const handleClose = ((key, keyPath) => {
                console.log(key, keyPath)
            })


            return {
                menuList,
                handleOpen,
                handleClose,
                menuData
            }
        }
    }
</script>

<style lang="scss" scoped>


</style>

 

子组件：MenuTree.vue

<template>
    <div>
        <template v-for="(menu,index) in menuData">
            <el-submenu :key="menu.index" :index="menu.index" v-if="menu.children" >
                <template slot="title">
                        <i :class="menu.icon"></i>
                        <span slot="title">{{menu.name}}</span>
                </template>
                <MenuTree :menuData="menu.children" ></MenuTree>
            </el-submenu>
            <el-menu-item :key="menu.index" :index="menu.index"   v-else>
                    <i :class="menu.icon"></i>
                    <span slot="title">{{menu.name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
    import {reactive, ref, isRef, toRefs, onMounted, watch, onUnmounted} from '@vue/composition-api';
    export default {
        name: "MenuTree",
        props: ['menuData'],
        components:{
        },
        setup({root}, props) {
            return {
                props,
            }
        }
    }
</script>

<style lang="scss" scoped>
    .bgc{
        background-color: #f56c6c;
    }

    .bgcChild{
        background-color: #f56c6c;
    }


</style>

 

效果：