[JavaScript知识库]vue+element ui 递归菜单

vue+element ui 递归菜单

思路

定义side-bar和side-bar-item两个component，根据传入的菜单树生成递归菜单

side-bar

props: {menus: Array}

<template>
<div id="side-bar">
    <el-menu v-if="menus && menus.length > 0" router>
        <side-bar-item v-for="(menu,idx) in menus" :menu="menu" :key="idx"/>
    </el-menu>
</div>
</template>

side-bar-item

props:{menu: Object}

<template>
<div id="side-bar-item">
    <el-submenu v-if="menu.type===1" :index="menu.path" :key="menu.path">
        <template slot="title">
            <i :class="menu.meta.icon"/>
            <span slot="title">{{menu.meta.title}}</span>
        </template>
        <template v-if="menu.children && menu.children.length > 0">
            <side-bar-item v-for="(innerMenu,innerIdx) in menu.children" :menu="innerMenu" :key="innerIdx"/>
        </template>
    </el-submenu>
    <el-menu-item v-else :index="menu.path" :key="menu.path">
        <i :class="menu.meta.icon"/>
        <span slot="title">{{menu.meta.title}}</span>
    </el-menu-item>
</div>
</template>

使用

<side-bar :menus="menus"/>

样例数据

menus: [
    {
        type: 1,
        path: '/system',
        meta: {icon: 'el-icon-home', title: '系统模块'},
        children: [
            {
                type: 2,
                path: '/system/user',
                meta: {icon: 'el-icon-home', title: '用户'},
            },
            {
                type: 2,
                path: '/system/role',
                meta: {icon: 'el-icon-home', title: '角色'},
            }
        ]
    },
    {
        type: 2,
        path: '/ex',
        meta: {icon: 'el-icon-home', title: 'ex'}
    },
],

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖