vue3+elementui-plus实现无限递归菜单

效果图

实现方式是:通过给定的数据结构层数来动态生成多级菜单

复制代码
menu.vue

<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#f8f8f9"
      style="margin-top: 20px;margin-left: 1px;"
  >
    <Childrenmenu v-for="menuItem in menuItems" :key="menuItem.value" :item="menuItem" />
  </el-menu>
</template>

<script setup>
import Childrenmenu from "./childrenmenu";
const menuItems = [
	  {
	    value: '1',
	    label: '菜单1',
	    children: [
	      {
	        value: '1-1',
	        label: '子菜单1-1',
	        children: [
	          { value: '1-1-1', label: '子菜单1-1-1' },
	          { value: '1-1-2', label: '子菜单1-1-2' },
	        ],
	      },
	      { value: '1-2', label: '子菜单1-2' },
	    ],
	  },
	  {
	    value: '2',
	    label: '菜单2',
	    children: [
	      { value: '2-1', label: '子菜单2-1' },
	      {
	        value: '2-2',
	        label: '子菜单2-2',
	        children: [
	          { value: '2-2-1', label: '子菜单2-2-1' },
	          { value: '2-2-2', label: '子菜单2-2-2' },
	        ],
	      },
	    ],
	  },
	  {
	    value: '3',
	    label: '菜单3',
	    children: [
	      {
	        value: '3-1',
	        label: '子菜单3-1',
	        children: [
	          {
	            value: '3-1-1',
	            label: '子菜单3-1-1',
	            children: [
	              { value: '3-1-1-1', label: '子菜单3-1-1-1' },
	              { value: '3-1-1-2', label: '子菜单3-1-1-2' },
	            ],
	          },
	        ],
	      },
	    ],
	  },
	];
	
const handleSelect = async (key, keyPath) => {
	 console.log(key, keyPath)
}
</script>

childrenmenu.vue

<template>
  <template v-if="item.children">
    <el-sub-menu :index="item.value">
      <template #title>{{ item.label }}</template>
      <Childrenmenu v-for="childItem in item.children" :key="childItem.value" :item="childItem" />
    </el-sub-menu>
  </template>
  <template v-else>
    <el-menu-item :index="item.value">{{ item.label }}</el-menu-item>
  </template>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['item']);
</script>

<style scoped>

</style>
相关推荐
程序猿追17 分钟前
Vue组件化开发
前端·html
艾德金的溪44 分钟前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长1 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH1 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴1 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30731 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园2 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
麦麦大数据2 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
Kevin Wang7273 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic3 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor