在 Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）中，NavMenu 导航菜单组件通常被称为 el-menu。虽然两个版本在 API 和实现上可能有一些细微的差别，但基本概念和用法是相似的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用 el-menu 组件。
Vue 2 + Element UI
在 Vue 2 的 Element UI 中，el-menu 组件用于创建导航菜单。
属性（Props）
mode：菜单模式，如horizontal（水平）或vertical（垂直）。default-active：默认激活的菜单项的索引。default-openeds：默认展开的菜单项的索引数组（仅当mode为vertical时有效）。unique-opened：是否只保持一个子菜单的展开（仅当mode为vertical时有效）。router：是否启用路由模式。background-color：菜单的背景色。text-color：菜单的文字颜色。active-text-color：当前激活菜单的文字颜色。- …（还有其他属性，具体请参考 Element UI 官方文档）
事件（Events）
select：当菜单项被点击时触发。open：当子菜单展开时触发。close：当子菜单关闭时触发。- …（还有其他事件，具体请参考 Element UI 官方文档）
示例
<template><el-menu:default-active="activeIndex"class="el-menu-vertical-demo"@select="handleSelect"mode="vertical"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="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'};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);this.activeIndex = key;}}
};
</script>
Vue 3 + Element Plus
在 Vue 3 的 Element Plus 中，el-menu 组件的用法与 Vue 2 的 Element UI 类似，但可能会有一些 API 变动和新增功能。
属性（Props）和事件（Events）
Element Plus 的 el-menu 组件的大部分属性和事件与 Element UI 保持一致，但可能会有一些细微的差别或新增的属性/事件。
示例（假设与 Element UI 类似）
<template><el-menu:default-active="activeIndex"@select="handleSelect"mode="vertical"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><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 setup>
import { ref } from 'vue';const activeIndex = ref('1');function handleSelect(key, keyPath) {console.log(key, keyPath);activeIndex.value = key;
}
</script>
注意：由于 Element Plus 还在不断发展中，具体的 API 和使用方法可能会有所不同
