Vue3 Element-plus和el-menu无限级菜单组件如何封装

在现代的前端开发中，菜单组件是一个常见的需求，尤其是在管理后台系统中。Element-plus 是一个基于 Vue3 的 UI 组件库，提供了丰富的组件，其中 el-menu 是一个常用的菜单组件。然而，el-menu 默认只支持有限层级的菜单，对于需要无限级菜单的场景，我们需要对其进行封装和扩展。

本文将详细介绍如何使用 Vue3 和 Element-plus 封装一个支持无限级菜单的 el-menu 组件。

1. 准备工作

首先，确保你已经安装了 Vue3 和 Element-plus。如果还没有安装，可以通过以下命令进行安装：

npm install vue@next
npm install element-plus

2. 基本结构

我们首先创建一个基本的 el-menu 组件，并在此基础上进行扩展。

<template>
  <el-menu :default-active="activeIndex" mode="vertical">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template #title>产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  }
};
</script>

这是一个简单的两级菜单结构。接下来，我们需要将其扩展为支持无限级菜单。

3. 递归组件

为了实现无限级菜单，我们需要使用递归组件。递归组件是指组件在其模板中调用自身。我们可以通过递归的方式渲染菜单的每一级。

首先，我们定义一个 MenuItem 组件，用于渲染单个菜单项或子菜单。

<template>
  <el-menu-item v-if="!item.children" :index="item.index">
    {{ item.title }}
  </el-menu-item>
  <el-submenu v-else :index="item.index">
    <template #title>{{ item.title }}</template>
    <MenuItem
      v-for="child in item.children"
      :key="child.index"
      :item="child"
    />
  </el-submenu>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
};
</script>

在这个组件中，我们根据 item.children 是否存在来决定渲染 el-menu-item 还是 el-submenu。如果 item.children 存在，则递归渲染 MenuItem 组件。

4. 封装无限级菜单组件

接下来，我们封装一个 InfiniteMenu 组件，用于接收菜单数据并渲染整个菜单。

<template>
  <el-menu :default-active="activeIndex" mode="vertical">
    <MenuItem
      v-for="item in menuData"
      :key="item.index"
      :item="item"
    />
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
  name: 'InfiniteMenu',
  components: {
    MenuItem
  },
  props: {
    menuData: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: String,
      default: '1'
    }
  }
};
</script>

在这个组件中，我们接收 menuData 作为菜单数据，并通过 v-for 循环渲染 MenuItem 组件。

5. 使用无限级菜单组件

最后，我们可以在父组件中使用 InfiniteMenu 组件，并传入菜单数据。

<template>
  <InfiniteMenu :menu-data="menuData" />
</template>

<script>
import InfiniteMenu from './InfiniteMenu.vue';

export default {
  components: {
    InfiniteMenu
  },
  data() {
    return {
      menuData: [
        {
          index: '1',
          title: '首页'
        },
        {
          index: '2',
          title: '产品',
          children: [
            {
              index: '2-1',
              title: '产品1'
            },
            {
              index: '2-2',
              title: '产品2',
              children: [
                {
                  index: '2-2-1',
                  title: '产品2-1'
                },
                {
                  index: '2-2-2',
                  title: '产品2-2'
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

在这个例子中，我们定义了一个包含多级子菜单的 menuData，并将其传递给 InfiniteMenu 组件进行渲染。

6. 总结

通过以上步骤，我们成功封装了一个支持无限级菜单的 el-menu 组件。这个组件通过递归的方式渲染菜单的每一级，能够灵活应对各种复杂的菜单结构。

在实际项目中，你可以根据需求进一步扩展这个组件，例如添加图标、动态加载菜单数据等功能。希望本文对你有所帮助，祝你在 Vue3 和 Element-plus 的开发中取得更多成果！