在管理后台需要按用户权限展示不同导航菜单时，我们需要从后端请求数据来进行菜单渲染。
但由于v-for与v-if不能在同一标签内使用（存在性能问题：v-for 具有比 v-if 更高的优先级，意味着 v-if 将分别重复运行于每个 v-for 循环中），所以我们需要将其分别放在不同标签内，v-for放在父级，v-if放在子级。
同时，由于使用实体实体标签作为v-for载体，将会影响el-menu的list结构，因此，我们将v-for放在template标签中。
代码如下（以三级菜单为例）：
html
<el-menu>
<div class="side-bar-title">后台管理</div>
<template v-for="menu_0 in menuData">
<el-submenu v-if="menu_0.childMenu" :index="menu_0.id" :key="menu_0.id">
<template slot="title">{{menu_0.name}}</template>
<template v-for="menu_1 in menu_0.childMenu">
<el-submenu v-if="menu_1.childMenu" :index="menu_1.id" :key="menu_1.id">
<template slot="title">{{menu_1.name}}</template>
<template v-for="menu_2 in menu_1.childMenu">
<el-menu-item :index="menu_2.url" :key="menu_2.id">{{menu_2.name}}</el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :index="menu_1.url" :key="menu_1.id">{{menu_1.name}}</el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :index="menu_0.url" :key="menu_0.id">{{menu_0.name}}</el-menu-item>
</template>
</el-menu>
js
export default {
data () {
return {
menuData: [
{
name: "一级导航-1",
id: "1",
parentId: 0,
url: "comment1",
childMenu:[
{
id: "3",
name: "二级导航",
parentId: 1,
url: "comment3",
childMenu:[
{
id: "4",
name: "三级导航",
parentId: 3,
url: "comment4"
}]
}],
},{
id: "2"
name: "一级导航-2"
parentId: 0
url: "comment2"
}]
}
}
}
