vue动态菜单递归渲染

<template v-for="menu in userMenu">
        <el-submenu v-if="menu.children && menu.children.length>0 && menu.children[0].menuType ==1" :key="menu._id" :index="menu.path">
            <template #title>
                <i :class="menu.icon"></i>
                <span>{
    
    {
    
    menu.menuName}}</span>
            </template>
            <tree-menu :userMenu="menu.children"/>
        </el-submenu>
        <el-menu-item v-else-if="menu.menuType == 1" :index="menu.path" :key="menu._id">{
    
    {
    
    menu.menuName}}</el-menu-item>
</template>

首先判断菜单还有没有子菜单，如果有就递归调用，
menu.children && menu.children.length>0 && menu.children[0].menuType ==1，用来判断当前菜单有没有子菜单，子菜单的长度是不是大于0，当前菜单是不是按钮。判断结果为真，再次调用该菜单组件，把menu.children.，传入该组件。实现递归。当判断为假，跳出递归执行最后的子菜单渲染。