el-menu递归实现多级菜单组件的示例

下面是关于“el-menu递归实现多级菜单组件的示例”的完整攻略：

1. 准备工作

要实现多级菜单组件，我们需要先引入Element UI框架中的ElMenu组件和ElSubmenu组件，这两个组件的定义方式如下：

<el-menu :default-active="$route.path" class="el-menu-vertical-demo" active-text-color="#409EFF" background-color="#ffffff" text-color="#303133" menu-trigger="hover">
    <el-submenu index="1">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
        </template>
        <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="/home">首页</el-menu-item>
            <el-menu-item index="/about">关于</el-menu-item>
            <el-menu-item index="/contact">联系我们</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
            <template slot="title">分组二</template>
            <el-menu-item index="/services">服务</el-menu-item>
            <el-menu-item index="/products">产品</el-menu-item>
            <el-menu-item index="/cases">案例</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
        <template slot="title">
            <i class="el-icon-menu"></i>
            <span>导航二</span>
        </template>
        <el-menu-item-group>
            <template slot="title">分组三</template>
            <el-menu-item index="/articles">文章</el-menu-item>
            <el-menu-item index="/videos">视频</el-menu-item>
            <el-menu-item index="/images">图片</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
            <template slot="title">分组四</template>
            <el-menu-item index="/documents">文档</el-menu-item>
            <el-menu-item index="/libraries">库</el-menu-item>
        </el-menu-item-group>
    </el-submenu>    
</el-menu>

2. 实现递归菜单

通过上面的代码，我们可以实现简单的多级菜单。但如果想要支持无限层级的菜单，就需要考虑使用递归组件的方式实现。

实现方法如下，首先定义一个递归组件MenuTree，通过递归调用自身来实现嵌套菜单的效果。

<template>
  <el-submenu v-if="item.children && item.children.length" :index="item.id">
    <template slot="title">{{ item.name }}</template>
    <menu-tree v-for="child in item.children" :key="child.id" :item="child" />
  </el-submenu>
  <el-menu-item v-else :index="item.url">{{ item.name }}</el-menu-item>
</template>

<script>
export default {
  name: "MenuTree",
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  components: {
    MenuTree
  }
};
</script>

在父组件中，我们可以通过传递菜单数据来使用这个递归组件：

<template>
  <el-menu>
    <menu-tree v-for="item in menuData" :key="item.id" :item="item" />
  </el-menu>
</template>

<script>
import MenuTree from "./MenuTree.vue";
export default {
  components: {
    MenuTree
  },
  data() {
    return {
      menuData: [
        {
          id: "1",
          name: "文档",
          url: "/documents",
          children: [
            {
              id: "1-1",
              name: "开发文档",
              url: "/documents/development"
            }
          ]
        },
        {
          id: "2",
          name: "示例",
          url: "/examples",
          children: [
            {
              id: "2-1",
              name: "示例1",
              url: "/examples/1",
              children: [
                {
                  id: "2-2",
                  name: "示例1-1",
                  url: "/examples/1/1"
                }
              ]
            },
            {
              id: "2-3",
              name: "示例2",
              url: "/examples/2"
            }
          ]
        }
      ]
    };
  }
};
</script>

3. 示例说明

我们可以通过父组件的menuData属性来传递菜单数据，从而通过递归组件实现多级菜单的嵌套效果。而在实际使用中，我们可以根据自己的需求来对菜单进行定制，如添加hover效果、修改菜单样式等。

另外，如果我们想要实现更加复杂的菜单效果，可以借助Element UI框架中其他组件的支持，如可折叠的面板组件ElCollapse，以及卡片组件ElCard等。这些组件的使用方式可以参考Element UI的官方文档。