Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩遇到问题

Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩遇到问题

自定义组件包含在 fragment下面， 不是div 不然展开和收缩会出现字体无法隐藏的问题

如下:
解决菜单导航折叠后文字不隐藏

出现这个问题是因为我们在<el-menu>嵌套中出现了意料之外的<div>,而<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一
但是我们又不能直接删掉<div>,因为<template>中包含的必须是一个根标签，而v-for会形成不确定的并列标签

项目中安装vue-fragment
cnpm install --save vue-fragment

在main.js中引入
// main.js
import Fragment from ‘vue-fragment’
Vue.use(Fragment.Plugin)

修改为，fragment下面也是由template包裹

代码展示
自定义组件：

<template>
  <fragment class="navMenu">
    <template v-for="(navMenu) in navMenus">
      <el-menu-item
        v-if="
          navMenu.childs == null &&
          navMenu.