VUE+elementUI递归实现动态路由多级菜单

在Vue中使用elementUI创建一个递归组件来实现动态路由多级菜单的示例代码如下：

<template>
  <el-submenu v-if="menu.children && menu.children.length > 0" :index="menu.name">
    <template slot="title">{{ menu.title }}</template>
    <menu-item
      v-for="child in menu.children"
      :key="child.name"
      :menu="child"
    ></menu-item>
  </el-submenu>
  <el-menu-item v-else :index="menu.name">{{ menu.title }}</el-menu-item>
</template>
 
<script>
export default {
  name: 'MenuItem',
  props: {
    menu: {
      type: Object,
      required: true
    }
  }
};
</script>

在父组件中，你需要传递一个包含路由信息的菜单对象数组给<menu-item>组件：

<template>
  <el-menu :default-openeds="defaultOpeneds">
    <menu-item
      v-for="menu in menuData"
      :key="menu.name"
      :menu="menu"
    ></menu-item>
  </el-menu>
</template>
 
<script>
import MenuItem from './MenuItem.vue';
 
export default {
  components: {
    MenuItem
  },
  data() {
    return {
      menuData: [
        // 这里填充你的多级路由数据
      ],
      defaultOpeneds: []
    };
  }
};
</script>

menuData 应该是一个嵌套的对象结构，每个对象代表一个菜单项，可以包含子菜单项。递归组件会根据是否有 children 属性来判断是否要渲染 el-submenu 还是 el-menu-item。

确保你的路由数据结构是这样的：

menuData: [
  {
    name: '1',
    title: '一级菜单1',
    children: [
      {
        name: '1-1',
        title: '二级菜单1-1',
        children: [
          // ...可以继续嵌套子菜单项
        ]
      }
      // ...其他二级菜单项
    ]
  },
  // ...其他一级菜单项
];

这样就可以根据传入的路由数据生成多级菜单了。