VUE3+elementPlus 多级菜单(递归)

最新推荐文章于 2024-09-22 13:16:10 发布

是鸡蛋不是鸭蛋

最新推荐文章于 2024-09-22 13:16:10 发布

阅读量67

点赞数

文章标签：前端 javascript vue.js

原文链接：https://blog.csdn.net/ztwelve/article/details/133868240

版权

<template>
    <!-- 导航菜单 -->
    <div class="wrapper">
        <el-menu v-for="item in list" :key="item.url">
            <!-- 存在子菜单且children不为空 -->
            <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.url">
                <template #title>
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.name }}</span>
                </template>
                <!-- 递归调用本身 -->
                <MyAside :list="item.children" />
            </el-sub-menu>
            <!-- 只有一级菜单 -->
            <el-menu-item v-else :index="item.url">
                <template #title>
                    <span>{{ item.name }}</span>
                </template>
            </el-menu-item>
        </el-menu>
    </div>
</template>