v-for双重循环应用

 树形图上结构的菜单

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>