Element Menu菜单组件使用递归来实现多级

实现效果
具体实现方法
目录结构

Index.vue下代码

<template>
  <div>
    <el-menu>
      <menu-item :menu-data='menuData' />
    </el-menu>
  </div>
</template>

<script>
import MenuItem from './MenuItem.vue'
export default {
  name: 'Menu',
  components: { MenuItem },
  data() {
    return {
      menuData: [
        {
          name: '菜单',
          children: [
            {
              name: '菜单',
              children: [{
                name: '菜单',
                children: [{
                  name: '菜单'
                }, { name: '菜单' }]
              }, { name: '菜单' }]
            },
            {
              name: '菜单',
              children: [{
                name: '菜单',
                children: [{
                  name: '菜单'
                }, { name: '菜单' }]
              }, { name: '菜单' }]
            }
          ]
        },
        {
          name: '菜单',
          children: [{ name: '菜单' }]
        }
      ]
    }
  }
}
</script>

MenuItem.vue下代码

<template>
  <div>
    <el-submenu v-for="(v,k) in menuData" :key="k" :index="`${menuLevel}-${k}`">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{v.name}}{{`${menuLevel}-${k}`}}</span>
      </template>
      <menu-item :menu-data="v.children" :menuLevel="`${menuLevel}-${k}`" />
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    menuData: {
      type: Array,
      default: () => []
    },
    menuLevel: {
      type: String,
      default: ''
    }
  }
}
</script>

menuLeve是为了实现el-submenu index的唯一性和更清晰的展示层级