vue elementUI封装的无限多级导航菜单(递归循环)

在Vue中使用Element UI时，可以通过递归组件来创建无限多级导航菜单。以下是一个简单的例子：

1. 创建一个名为NavMenu的递归组件。
2. 使用el-submenu和el-menu-item来构建多级菜单。
3. 通过v-for来遍历菜单项，如果当前项有子菜单，则递归调用NavMenu组件。

<template>
  <div>
    <el-menu :default-openeds="defaultOpeneds" @open="handleOpen" @close="handleClose">
      <nav-menu :data="menuData" />
    </el-menu>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      defaultOpeneds: [],
      menuData: [
        {
          title: '一级菜单1',
          index: '1',
          children: [
            { title: '二级菜单1-1', index: '1-1' },
            { title: '二级菜单1-2', index: '1-2' }
            // ...可以有更多子菜单
          ]
        },
        // ...可以有更多一级菜单
      ]
    };
  },
  components: {
    'NavMenu': {
      name: 'NavMenu',
      props: ['data'],
      template: `
        <div>
          <el-submenu v-for="(item, index) in data" :index="item.index" :key="index">
            <template slot="title">{{ item.title }}</template>
            <nav-menu v-if="item.children" :data="item.children" />
            <el-menu-item v-else :index="item.index">{{ item.title }}</el-menu-item>
          </el-submenu>
        </div>
      `
    }
  },
  methods: {
    handleOpen(index, indexPath) {
      this.defaultOpeneds = [index];
    },
    handleClose(index, indexPath) {
      this.defaultOpeneds = [];
    }
  }
};
</script>

在这个例子中，menuData是一个包含多级菜单数据的数组。递归组件NavMenu接收data属性，并使用v-for来遍历这些数据，如果当前项有子菜单，则递归地调用自己来显示子菜单。这样就形成了一个无限多级的导航菜单。