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

在Vue 3和Element Plus中实现无限递归菜单，可以通过自定义组件来实现。以下是一个简单的示例：

<template>
  <el-menu :default-openeds="defaultOpeneds" @open="handleOpen">
    <menu-item v-for="item in menuData" :key="item.id" :item="item" />
  </el-menu>
</template>
 
<script setup>
import { ref } from 'vue';
import MenuItem from './MenuItem.vue';
 
const defaultOpeneds = ref([]);
const menuData = ref([
  // 这里填充你的菜单数据结构
  // 每个菜单项包含 id, label, children 属性，children 可以是更深层次的菜单项
]);
 
const handleOpen = (id) => {
  defaultOpeneds.value = [id];
};
</script>
 
<style>
/* 添加样式 */
</style>

MenuItem.vue 组件用于递归渲染每一个菜单项：

<template>
  <el-sub-menu v-if="item.children && item.children.length" :index="item.id">
    <template #title>{{ item.label }}</template>
    <menu-item
      v-for="child in item.children"
      :key="child.id"
      :item="child"
    />
  </el-sub-menu>
  <el-menu-item v-else :index="item.id">{{ item.label }}</el-menu-item>
</template>
 
<script setup>
defineProps({
  item: Object
});
</script>

确保你的菜单数据至少包含 id, label, 和 children 属性。这样一个无限递归菜单就完成了。你可以根据需要添加更多的逻辑，比如菜单的展开状态等。