element-plus中菜单组件基本使用（多级菜单）_element plus 菜单

<template>
   <div class="f-menu">
        <el-menu
            default-active="2"
            class="border-0"
        >
            <template v-for="(item,index) in asideMenus" :key="index">
                <!-- 二级菜单 -->
                <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <!-- 子菜单 -->
                    <el-menu-item v-for="(item2,index2) in item.child" :key="index2" 
                    :index="item2.frontpath">
                        {{ item2.name }}
                    </el-menu-item>
                </el-sub-menu>
                <!-- 一级菜单 -->
                <el-menu-item v-else :index="item.frontpath">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>
   </div>
</template>
<script setup>
    const asideMenus = [
        {
            'name':'后台面板',
            'icon':'help',
            'child':[
                {
                    'name':'主控台',
                    'icon':'home-filled',
                    'path':'/'
                }
            ]
        },
        {
            'name':'商城管理',
            'icon':'shopping-bag',
            'child':[
                {
                    'name':'商品管理',
                    'icon':'shopping-cart-full',
                    'path':'/goods/list'
                }
            ]
        },
        {
            'name':'会员管理',
            'icon':'shopping-bag',
        }
    ]
</script>
<style>
    .f-menu {
        width: 250px;
        @apply shadow-md;
        position: fixed;
        top:64px;
        bottom:0;
        left:0;
        overflow: auto;
    }
</style>

效果：

 <el-sub-menu></el-sub-menu>:多级菜单

<el-menu-item></el-menu-item>:一级菜单

一般el-menu包在一个template标签中去遍历