el-menu 菜单递归循环

前端开发中遇到一个el-menu菜单动态加载的问题，深度不确定，数据格式大概是这样的

menuData: [
                {
                    id: 1,
                    label: '标签一',
                    children: [
                        {
                            id: 2,
                            label: '内容1-1'
                        },
                        {
                            id: 26,
                            label: '内容1-2'
                        },
               
                        {
                            id: 3,
                            label: '内容1-3',
                            children: [{
                                id: 4,
                                label: '1-3-1'
                            },{
                                id: 5,
                                label: '1-3-2'
                            }]
                        
                    ]
                },
                {
                    id: 6,
                    label: '标签二',
                }
            ]

先创建子组件 menuTree.vue

<template>
    <div>
        <template v-for="(item) in menuData">
            <el-submenu v-if="item.children&&item.children.length>0" :key="item.id" :index="item.id + ''">
                <template slot="title">{{item.label}}</template>
                <MenuTree :menuData="item.children"></MenuTree> 
            </el-submenu>
            <el-menu-item v-else :key="item.id" :index="item.id+''">
                <span slot="title">{{item.label}}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
  export default {
    props: ['menuData'],
    name: 'MenuTree'
  }
</script>

再创父组件，并对子组件进行引入

<template>
    <div class="satellite-content">
        <div class="content-nav">
            <el-menu 
            ref="healthMenu"
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#2A2A2A"
            text-color="#8A8A8A"
            active-text-color="#FFFFFF"
            :default-openeds="defaultOpeneds"
            @select="selectItems">
                <MenuTree :menuData="treeData"></MenuTree>
            </el-menu>
        </div>
    </div>
</template>
<script>

import MenuTree from '@/components/menuTree.vue'
 methods: {
        selectItems(index){
            console.log('selectITEMS', index);
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {     
            console.log(key, keyPath);
        },

</script>

根据自己的需求调整样式