Question

elementUI 的 navmenu 怎么在 v-for 中 循环不同的标签?

el-menu这个组件有下级子菜单的标签是el-submenu；单菜单的标签是el-menu-item；怎么用一个数据数组循环出不同的标签呢？

Answer 1

路由跳转(一)组件（NavMenu.vue）调用（app.vue）路由跳转(二)水平效果图区别问题1 刷新页面2 非最后一层,点击可跳转路由3 水平菜单点击多路由时，有轮廓

vue elementui navmenu 多级导航菜单

路由跳转(一)

el-menu标签中的router

参数说明类型可选值默认值router是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转boolean—false

<el-menu router>
组件(NavMenu.vue) 中的路由跳转,:index="navMenu.entity.name"
:default-active="activeIndex"中的activeIndex默认值也要是.entity.name的值
此时菜单数据中的value 没有用到,可以删除。


注意路由变化

组件（NavMenu.vue）

<template> <div class="navMenu"> <template v-for="navMenu in navMenus"> <!-- 最后一级菜单 --> <el-menu-item v-if="!navMenu.childs&&navMenu.entity" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" > <i :class="navMenu.entity.icon"></i> <span slot="title">{{navMenu.entity.alias}}</span> </el-menu-item> <!-- 此菜单下还有子菜单 --> <el-submenu v-if="navMenu.childs&&navMenu.entity" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name"> <template slot="title"> <i :class="navMenu.entity.icon"></i> <s

Answer 2

<template v-for="item in folder_nodes">
  <el-submenu v-if="item.children"></el-submenu>
  <el-menu-item v-else></el-menu-item>
</template>