el-menu无限层菜单

`el-menu` 是 Element UI 提供的一款用于构建导航栏菜单组件，它支持无限层级的设计。"无限层菜单"通常是指菜单可以展开到任意级别，用户可以通过点击父菜单来显示其下的所有子菜单，而无需预先定义好所有的层级结构。

在 Element UI 中，创建无限层菜单的基本步骤包括：

1. 定义数据结构：需要一个嵌套的对象数组，每个节点包含 `title`（文本）、`children`（子菜单）以及可能的其他属性如 `active`（默认选中状态）。

const menuData = [
  {
    label: '一级菜单',
    children: [
      { label: '二级菜单', children: [/* 子菜单 */] },
      /* 更多子菜单 */
    ]
  },
  /* 其他一级菜单 */
];

2. 在 HTML 结构中，使用 `el-menu` 组件，并设置 `default-active` 属性来指定初始激活的菜单项，以及 `load-data` 钩子函数来动态加载下级菜单。

<template>
  <el-menu :default-active="0" @open-change="handleOpenChange">
    <!-- 使用 v-for 循环渲染菜单 -->
    <el-submenu v-for="(item, index) in menuData" :key="index" :index="index">
      <template slot="title">{{ item.label }}</template>
      <el-menu-item v-if="item.children" v-for="subItem in item.children" :index="subItem.index">
        {{ subItem.label }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuData,
    };
  },
  methods: {
    handleOpenChange(index) {
      // 当打开新的子菜单时，这里可以触发异步加载操作
      if (index !== -1) {
        this.$axios.get('/api/menus/' + index).then(res => {
          this.menuData[index].children = res.data;
        });
      }
    },
  },
};
</script>