Vue+elementUI动态渲染折叠导航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循环

实现了~~~

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

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