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 }}
}