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

自定义动态数据菜单导航组件实现展开收缩遇到问题"/>

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)

代码展示
自定义组件：

<template><fragment class="navMenu"><template v-for="(navMenu) in navMenus"><el-menu-itemv-if="navMenu.childs == null &&navMenu.entity &&navMenu.entity.state === 'ENABLE'":key="navMenu.entity.id":data="navMenu":index="navMenu.entity.name":route="navMenu.entity.value"><i :class="navMenu.entity.icon"></i><span slot="title" >{{ navMenu.entity.alias }}</span></el-menu-item><el-submenuv-if="navMenu.childs && navMenu.entity && navMenu.entity.state === 'ENABLE'":key="navMenu.entity.id":data="navMenu":index="navMenu.entity.name"><template slot="title"><i :class="navMenu.entity.icon"></i><span> {{ navMenu.entity.alias }}</span></template><NavMenu :navMenus="navMenu.childs"></NavMenu></el-submenu></template></fragment>
</template><script>
export default {name: "NavMenu",props: ["navMenus"],data() {return {};},methods: {},
};
</script><style scoped lang="scss">
.navMenu{width: 100%;height: 100%;// height: 50vh;00
}
</style>

完成后效果图:

到这就OK了