树形图上结构的菜单
1.不包含子菜单的一级菜单
2.包含子菜单的一级菜单
现在已经从服务器拿到数据了,需要把数据渲染到页面上,因为这个结构是个树形图,所以写循环不能直接在标签上面写,搞个template标签包起来,把循环写在这里,但是template标签不能写key值,把key值写在其他标签,然后做个判断,如果有子菜单就渲染有子菜单的名字,反之,就渲染没有子菜单的名字
然后在二级菜单再次循环,in item.children,再次渲染数据就可以了
<!-- template标签无法写key值,所以要把key值写在其他标签 -->
<template v-for="item in menus">
<!-- 不包含子菜单的“一级菜单” -->
<el-menu-item :index='item.indexPath' :key="item.indexPath" v-if="!item.children">
<i :class="item.icon">
</i>{{item.title}}
</el-menu-item>
<!-- 包含子菜单的“一级菜单” -->
<el-submenu :index='item.indexPath' :key="item.indexPath" v-else>
<template slot="title">
<i :class="item.icon"></i>
<span>{{item.title}}</span>
</template>
<el-menu-item :index="subItem.indexPath" v-for="subItem in item.children" :key="subItem.indexPath">
<i :class="subItem.icon">
</i>{{subItem.title}}
</el-menu-item>
</el-submenu>
</template>