el-menu实现多级菜单嵌套生成—递归实现无限级菜单

2023-10-19 19:09:45

探索 el-menu：打造响应式和用户友好的菜单

简介

构建用户界面时，菜单是必不可少的组件，它们提供了一种便捷且直观的方式来组织和导航内容。在 Vue.js 生态系统中，el-menu 组件是一个强大的工具，可让您创建各种菜单，从简单的单级菜单到复杂的嵌套菜单。本文将深入探讨 el-menu，展示其功能，并提供如何实现常见菜单场景的分步指南。

el-menu 的组成

el-menu 组件由两个主要部分组成：

menu： 充当菜单的容器，定义其位置、尺寸和其他样式属性。
item： 代表单个菜单项，包含菜单项的文本、图标和子菜单。

实现简单的菜单

最简单的菜单是由单级菜单项组成的。要实现此类菜单，您只需在 el-menu 组件中嵌套 el-menu-item 组件即可。例如：

<el-menu default-active="1">
  <el-menu-item index="1">主页</el-menu-item>
  <el-menu-item index="2">关于我们</el-menu-item>
  <el-menu-item index="3">联系我们</el-menu-item>
</el-menu>

创建多级菜单

当需要组织更复杂的内容时，多级菜单就派上用场了。要创建多级菜单，您只需在 el-menu-item 组件中嵌套另一个 el-menu 组件。子菜单将作为父菜单项的子菜单出现。

<el-menu default-active="1">
  <el-menu-item index="1">主页</el-menu-item>
  <el-menu-item index="2">
    <template slot="title">关于我们</template>
    <el-menu>
      <el-menu-item index="2-1">公司简介</el-menu-item>
      <el-menu-item index="2-2">联系我们</el-menu-item>
    </el-menu>
  </el-menu-item>
  <el-menu-item index="3">联系我们</el-menu-item>
</el-menu>

实现无限级菜单

el-menu 还支持创建无限级菜单，允许您根据需要嵌套任意数量的子菜单。要实现此功能，您可以使用递归技术，其中一个菜单包含一个指向自身子菜单的引用。

<template>
  <el-menu default-active="1">
    <el-menu-item
      v-for="item in menuData"
      :key="item.index"
      :index="item.index"
    >
      <template slot="title">{{ item.title }}</template>
      <el-menu v-if="item.children" :default-active="item.children[0].index">
        <el-menu-item
          v-for="child in item.children"
          :key="child.index"
          :index="child.index"
        >
          {{ child.title }}
        </el-menu-item>
      </el-menu>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          index: '1',
          title: '主页',
        },
        {
          index: '2',
          title: '关于我们',
          children: [
            {
              index: '2-1',
              title: '公司简介',
            },
            {
              index: '2-2',
              title: '联系我们',
            },
          ],
        },
        {
          index: '3',
          title: '联系我们',
        },
      ],
    };
  },
};
</script>