【Vue+Element】菜单导航折叠后文字不隐藏

文章转自： 【Vue+Element】菜单导航折叠后文字不隐藏_熬夜上分的博客-CSDN博客

树形菜单导航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,
            "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": []
        }]
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
2. 递归树级菜单
这个问题网上有比较多的答案。主要利用Vue组件的name属性，然后实现递归。

编写一个自定义zMenu.vue组件，其中实现递归逻辑
在视图层引用zMenu.vue
<!-- 视图层 -->
<el-menu style="width: 100%;" :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="menu.menuId + ''" :key="menu.menuId">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.menuName}}</span>
        </template>
        <z-menu :menus="menu.children"></z-menu>
      </el-submenu>
      <el-menu-item v-else :index="menu.menuId + ''" @click="handleRouter(menu)" :key="menu.menuId">
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.menuName}}</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.push(menu.route);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
至此，初步实现了功能，但是当折叠时我们发现文字并没有隐藏
出现这个问题是因为我们在<el-menu>嵌套中出现了意料之外的<div>,而<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一
但是我们又不能直接删掉<div>,因为<template>中包含的必须是一个根标签，而v-for会形成不确定的并列标签
于是我们找到了vue-fragment这个库

3. 导航栏折叠
项目安装vue-fragment
cnpm install --save vue-fragment
1
在main.js中引入
// main.js
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
1
2
3
将zMenu.vue中的<div>修改为<fragment>即可
<template>
  <fragment>
    <template v-for="menu in menus">
      <el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.menuId + ''" :key="menu.menuId">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.menuName}}</span>
        </template>
        <z-menu :menus="menu.children"></z-menu>
      </el-submenu>
      <el-menu-item v-else :index="menu.menuId + ''" @click="handleRouter(menu)" :key="menu.menuId">
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.menuName}}</span>
      </el-menu-item>
    </template>
  </fragment>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参考链接
递归菜单
导航栏折叠后文字不隐藏
vue-fragment
————————————————
版权声明：本文为CSDN博主「熬夜上分」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/pangji0417/article/details/93353327