浅浅element-ui导航栏封装使用学习一下

封装组件SubMenu.vue：

<template>
    <template v-for="(item,index) in menuList">
        <el-menu-item  v-if="item.hasChildren === 0"
                       :index="item.url"
                       :key="item.menuId">
            {{item.name}}
        </el-menu-item>
        <el-sub-menu v-else  :key="index" :index="item.url">
            <template #title>
                {{item.name}}
            </template>
            <SubMenu :menu-list="item.childList"></SubMenu>
        </el-sub-menu>
    </template>
</template>

<script>
    import { ref,toRefs,reactive,unref } from 'vue'
    import SubMenu from '../components/SubMenu'
    export default {
        name: "SubMenu",
        props:{
            menuList:{
                type:Array,
                required:true,
            },
            mode:String
        },
    }
</script>

<style scoped>

</style>

使用：

<el-menu
        :default-active="activeIndex"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        style="flex: 4;"
        router
>
    <SubMenu :menu-list="usermenu"></SubMenu>
</el-menu>

（这里导航数据是后台获取的）usermenu数据格式：

usermenu:[
    {
        menuId:'1',
        name:'一级菜单1',
        url:'./views/homePage',
        hasChildren:0,
        childList:[]
    },
    {
        menuId:'2',
        name:'一级菜单2',
        url:'',
        hasChildren:2,
        childList:[
            {
                menuId:'2-1',
                name:'二级菜单',
                url:'./views/Test',
                hasChildren:0,
                childList:[]
            },
            {
                menuId:'2-2',
                name:'二级菜单',
                url:'./views/Test2',
                hasChildren:0,
                childList:[]
            },
        ]
    },
    {
        menuId:'3',
        name:'一级菜单3',
        url:'./views/Test3',
        hasChildren:0,
        childList:[]
    },
]

url路径为定义的对应路由路径

最终实现：

 

 

菜鸟学习记录，如有侵犯，请联系删除，如有任何问题请大佬们多多指教，O(∩_∩)O谢谢