vue3.0+elementplus 动态添加menu菜单

深藏阁楼爱情的钟 2023-09-29 15:52 20阅读 0赞

<template>
        <el-aside width="200px">
            <el-menu router>
                <template v-for="v in items" :key="v.url">
                    <el-sub-menu v-if="v.children" :index="v.index">
                        <template #title>
                            <el-icon><component :is="v.icon"></component></el-icon>{
       {v.name}}
                        </template>
                        <el-menu-item v-for="vitem in v.children" :key="vitem.url" :index="vitem.url">
                            <template #title>
                                <el-icon><component :is="vitem.icon"></component></el-icon>{
       {vitem.name}}
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item v-else :index="v.url">
                        <template #title>
                            <el-icon><component :is="v.icon"></component></el-icon>{
       {v.name}}
                        </template>
                    </el-menu-item>
                </template>
            </el-menu>    
        </el-aside>
    </template>
    <script setup>
    import {ref,reactive} from 'vue'
    import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
    
    const items = reactive([
        {
            name:"Navigator",
            icon:IconMenu,
            index: 1,
            children:[
                {
                    name:"Navigator one",
                    url:"/testone",
                    icon:Setting
                },
                {
                    name:"Navigator four",
                    url:"/testfour",
                    icon:Setting
                }
            ]
        },
        {
            name:"Navigator two",
            icon:Message,
            index: 2,
            children:[
                {
                    name:"Navigator two two",
                    url:"/testtwo",
                    icon:Setting
                }
            ]
        },
        {
            name:"Navigator three",
            url:"/testthree",
            icon:Message
        },
        {
            name:"Navigator five",
            url:"/testfive",
            icon:Message
        }
    ])
    </script>

![4baaaf3f912c41fda9e742a14f59f27e.png][]

[4baaaf3f912c41fda9e742a14f59f27e.png]: https://img-blog.csdnimg.cn/4baaaf3f912c41fda9e742a14f59f27e.png