Vue+elementUI动态渲染折叠导航el-menu

这是官网上对折叠菜单的示例：


我的项目需求就是这样，开始用：

// 折叠按钮
<span @click="isCollapse = !isCollapse" title="菜单"></span>



//  这些属性都在官网可查
<el-menu
 :default-active="activeIndex"
  class="el-menu-vertical-demo"
  @select="handleSelect"
  :unique-opened="true"
  active-text-color="#ffd04b"
  background-color="rgb(0, 101, 105)"
  text-color="#fff"
  :collapse="isCollapse"
  >
      <template v-for="(item, index) in storeHomeMenu">
          <el-submenu :index="item.index" v-if="item.children.length != 0"  :key="index*30">
              <template slot="title">
                  <i :class="item.icons"></i>
                  <span slot="title">{{item.title}}</span>
              </template>
              <el-menu-item :index="items.index" v-for="(items, indexs) in item.children" :key="indexs">{{items.text}}</el-menu-item>
          </el-submenu>
          <el-menu-item :index="item.index" v-else  :key="index*2">
              <i :class="item.icons"></i>
              <span slot="title">{{item.title}}</span>
          </el-menu-item>
      </template>
</el-menu>



// js:
  data() {
    return {
        isCollapse: false,                    // 左侧导航是否为鼠标划入显示二级菜单
        activeIndex: '/',                     // 默认导航  
    }
  },
  computed: {
    storeHomeMenu () {
      return this.$store.state.homeShowMenu
    }
  },

ok，其实到这里我已经历经了℅％₃⊕∪≌％½∞…，成功渲染出可折叠的菜单了，接下来说写的过程中问题：

1. 这个菜单是动态渲染，所以必须要循环啊，但是循环的时候发现这个导航里面有的是有子菜单，有的没有子菜单，所以要使用v-if，问题来了，这v-for和v-if不能在一个组件上用啊
2. ok，那我就给el-menu里面写了一个根组件div，把所有el-menu-item,el-submenu包裹，用它来循环
3. 然后问题来了，导航折叠后菜单文字不隐藏，因为el-menu里面放了一个div，而本来不应该放的
4. ok，那就不要div了，换成template循环

实现了~~~

查阅的过程中发现很多童鞋说使用这个<fragment> </fragment>组件，看看他的博客就明白了，如果你要单独拿出来封装的话，可能会需要这个东西。emmmm，其实我也偷偷用过，后来发现不用也行。

可以看看这两篇，有助理解：
http://npm.taobao.org/package/vue-fragment          //  官网
http://www.uxys.com/html/Vue/20200309/22750.html     // 详细解读