element导航菜单v-for循环数据后折叠菜单栏时有下拉菜单的文字不隐藏

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
   <div v-for="item in menuData" :key="item.id">
    <el-submenu v-if="!item.children" :index="item.id" >
        <template slot="title">
          <span slot="title">{{item.menuTitle}}</span>
        </template>
        <el-menu-item v-for="item1 in item.children" :index="item1.path" :key="item1.menuId">
        <span slot="title">{{item1.menuTitle}}</span>
      </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :key="item.menuId">
        <span slot="title">{{item.menuTitle}}</span>
      </el-menu-item>
  </div>

</el-menu>

原因：在el-menu嵌套了div,而el-menu标签本身希望里面嵌套的是el-menu-item,el-submenu,el-menu-item-group其中之一
但是又必须有一个div标签,因为菜单有不同情况（只有一级或者多级下拉），v-for又不能与v-if在同一标签共存
查找资料发现有个fragment分段标签，不了解的可以看下此文Vue中fragment.js使用方法详解

好消息是vue提供了vue-fragment库
步骤如下
安装

npm i vue-fragment --save

引入

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

menu

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
   <fragmentv-for="item in menuData" :key="item.id">
    <el-submenu v-if="!item.children" :index="item.id" >
        <template slot="title">
          <span slot="title">{{item.menuTitle}}</span>
        </template>
        <el-menu-item v-for="item1 in item.children" :index="item1.path" :key="item1.menuId">
        <span slot="title">{{item1.menuTitle}}</span>
      </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.path" :key="item.menuId">
        <span slot="title">{{item.menuTitle}}</span>
      </el-menu-item>
  </fragment>
</el-menu>

如果由于环境问题不好安装vue-fragment依赖
直接进入github搜vue-fragment,引入以下两个文件

然后在main.js里引入

import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)

// or

import { Plugin } from 'vue-fragment'
Vue.use(Plugin)

// …

export const MyComponent {
  template: '
  <fragment>
    <input type="text" v-model="message">
    <span>{{ message }}</span>
  </fragment>
  ',
  data() { return { message: 'hello world }}
}