el-menu多级菜单-递归组件

最新推荐文章于 2025-02-14 21:56:59 发布

原创最新推荐文章于 2025-02-14 21:56:59 发布 · 1.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文档记录了如何在VueCLI3项目中创建一个可递归的多级菜单组件。`menu-tree`子组件用于展示具有子菜单的项，通过v-for遍历并递归渲染菜单数据。每个菜单项根据子菜单的存在与否决定是`el-submenu`还是`el-menu-item`。`menuData`数组包含了多级菜单的数据结构，包括索引、名称、路径和子菜单等信息。

el-menu多级菜单-递归组件

Vue cli3 多级菜单的实现
仅用作本人学习的记录，及在项目中用到的组件。

// menu-tree 子组件
<template>
  <el-submenu v-if="menu.children.length > 0" popper-class="popper_menu" :index="menu.index">
    <template slot="title">
      <i :class="menu.icon"></i>
      <span>{{menu.name}}</span>
    </template>
    <template v-for="child in menu.children" >
      <menu-tree v-if="child.children.length > 0" :menu="child" :key="child.index"></menu-tree>
      <el-menu-item v-else :index="child.path" :key="child.index">{{child.name}}</el-menu-item>
    </template>
  </el-submenu>
</template>

<script>
export default {
  name: 'menu-tree',
  props: {
    menu: {}
  },
  data () {
    return {
    }
  },
}
</script>

<style lang="less">
</style>```

在el-menu中使用

<el-menu>
	<template v-for="menu in menuData">
		<menu-tree v-if="menu.children.length > 0" :key="menu.index" :menu="menu"></menu-tree>
	</template>
</el-menu>

menuData: [
        {
          index: '1',
          name: '',
          icon: '',
          children: [
            {
              index: '1-1',
              name: '',
              path: '',
              children: []
            },
            {
              index: '1-2',
              name: '',
              path: 'stock',
              children: []
            },
            {
              index: '1-3',
              name: '',
              path: '',
              children: []
            },
            {
              index: '1-4',
              name: '',
              path: '',
              children: []
            },
            {
              index: '1-5',
              name: '',
              path: '',
              children: [
              	  {
              		index: '1-6-1',
              		name: '',
              		path: '',
              		children: []
            	  }
              ]
            }
          ]
        },
        {
          index: '2',
          name: '',
          icon: '',
          children: [
            {
              index: '2-1',
              name: '',
              path: '',
              children: []
            }
          ]
        }
      ]