vue3element-plus menu菜单

在Vue 3中使用Element Plus的Menu菜单可以通过引入Element Plus和Vue Router两个库来实现。你可以使用`el-menu`组件来创建菜单，同时结合`el-menu-item`和`el-sub-menu`组件来定义菜单项的结构。你可以参考以下代码实现：

<template>
  <el-menu>
    <el-menu-item v-for="(item, index) in data" :key="index" :index="item.code">
      <i :class="item.icon"></i>
      {{ item.title }}
      <template v-if="item.children">
        <el-sub-menu>
          <template #title>
            <i :class="item.icon"></i>
            {{ item.title }}
          </template>
          <el-menu-item v-for="(child, cIndex) in item.children" :key="cIndex" :index="child.code">
            <i :class="child.icon"></i>
            {{ child.title }}
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu-item>
  </el-menu>
</template>

在这个例子中，我们使用了`v-for`指令来遍历菜单数据数组，并使用`el-menu-item`和`el-sub-menu`组件来渲染菜单项。菜单项的图标、标题和唯一标识等属性都可以根据实际需求进行设置。同时，如果菜单项有子菜单，我们可以使用嵌套的`el-sub-menu`和`el-menu-item`组件来实现无限级渲染。

注意，以上代码只是一个示例，你需要根据你的具体需求进行适当的修改和补充。同时，你还需要在组件中引入Element Plus和Vue Router，并正确配置它们。

希望以上信息对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>