【Vue+Element】菜单导航折叠后⽂字不隐藏树形菜单导航Vue和Element实现
1. menus树结构
/**
* 权限管理在后台，前端接收到的是已经过滤完的菜单树
* @menuId 菜单唯⼀识别
* @menuName 名称
* @icon 图标
* @parentId ⽗菜单，前端不⽤，后端⽤来嵌套树
* @route 只有叶⼦结点有路由
* @type 是菜单级别，只有⼀级菜单和⼆级菜单
* @orderNum 是菜单排序，后台需要⽤来排序，前端不⽤
* @children 叶⼦结点没有该属性或者为空数组
*/
// 获取菜单树
const menuTreeData =[{
"menuId":1,
"menuName":"系统管理",
"parentId":0,
"route":null,
"type":0,
"icon":"el-icon-setting",
"orderNum":0,
"children":[{
"menuId":2,
"menuName":"⽤户",
"parentId":1,
"parentName":"系统管理",
"route":"/miniUser",
"type":1,
"icon":"el-icon-service",
"orderNum":1,
"children":[]
},
{
"menuId":3,
"menuName":"菜单管理",
"parentId":1,
"parentName":"系统管理",
"route":"/menu",
"type":1,
"icon":"el-icon-news",
"orderNum":2,
"children":[]
}
]
},
{
"menuId":4,
"menuName":"密码管理",
"parentId":0,
"route":null,
"type":0,
"icon":"el-icon-news",
"orderNum":2,
"children":[
{
"menuId":5,
"menuName":"个⼈管理",
"parentId":4,
"parentName":"密码管理",
"route":null,
"type":1,
"type":1,
"icon":"el-icon-news",
"orderNum":1,
"children":[
{
"menuId":6,
"menuName":"钱包管理",
"parentId":5,
"parentName":"个⼈管理",
"route":"/menu",
"type":2,
"icon":"el-icon-news",
"orderNum":1,
"children":[]
}]
},
{
"menuId":7,
"menuName":"交易查询",
"parentId":5,
"parentName":"密码管理",
"route":"/test",
"type":1,
"icon":"el-icon-news",
"orderNum":1,
"children":[]
}]
}]
2. 递归树级菜单
这个问题⽹上有⽐较多的答案。主要利⽤Vue组件的name属性，然后实现递归。
编写⼀个⾃定义zMenu.vue组件，其中实现递归逻辑
在视图层引⽤zMenu.vue
<!-- 视图层 -->
<el-menu :collapse="isCollapse" :collapse-transition="false" background-color="#333" text-color="#fff">
<z-menu :menus="menus"></z-menu>
</el-menu>
<!-- zMenu.vue -->
<template>
<div>
<template v-for="menu in menus">
<el-submenu v-if="menu.children && menu.children.length >= 1" :index="uId + ''" :key="uId">
<template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{uName}}</span>
</template>
<z-menu :menus="menu.children"></z-menu>
</el-submenu>
<el-menu-item v-else :index="uId + ''" @click="handleRouter(menu)" :key="uId">
<i :class="menu.icon"></i>
<span slot="title">{{uName}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default{
name:'zMenu',// ⾄关重要，就靠这个名字递归了
props:{
menus:{
type: Array,
default:function(){
return[];
},
required:false
}
},
methods:{
handleRouter(menu){
// 跳转路由
this.$router.ute);
}
}
}
</script>
⾄此，初步实现了功能，但是当折叠时我们发现⽂字并没有隐藏
出现这个问题是因为我们在<el-menu>嵌套中出现了意料之外的<div>,⽽<el-menu>标签本⾝希望⾥⾯嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之⼀
但是我们⼜不能直接删掉<div>，因为<template>中包含的必须是⼀个根标签，⽽v-for会形成不确定的并列标签
于是我们到了这个库
3. 导航栏折叠项⽬安装vue-fragment cnpm install --save vue-fragment 在main.js 中引⼊
// main.js
import  Fragment from  'vue-fragment'
Vue .use (Fragment .Plugin )将zMenu.vue 中的<div>修改为<fragment>即可
<template>
<fragment>
<template v-for="menu in menus">
导航菜单<el-submenu v-if="menu.children && menu.children.length >= 1" :index="uId + ''" :key="uId"> <template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{uName}}</span>
</template>
<z-menu :menus="menu.children"></z-menu>
</el-submenu>
<el-menu-item v-else :index="uId + ''" @click="handleRouter(menu)" :key="uId">
<i :class="menu.icon"></i>
<span slot="title">{{uName}}</span>
</el-menu-item>
</template>
</fragment>
</template>
参考链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。