element-ui实现动态菜单栏并处理菜单栏折叠文本不隐藏问题

关于element中使用NavMenu菜单栏折叠时title文本不隐藏：参考链接：https://blog.csdn.net/pangji0417/article/details/93353327如图第一步：项目安装vue-fragmentcnpm install --save vue-fragment第二步：在main.js中引入import Fragment from 'vu...

Yaien_jacky

3480人浏览 · 2019-09-27 11:39:49

Yaien_jacky · 2019-09-27 11:39:49 发布

一：创建 NavMenu.vue 动态添加菜单栏（递归实现）

<template>
  <div>
    <template v-for="navMenu in navMenus">
      //一级菜单
      <el-menu-item v-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-submenu v-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>
  </div>
</template>

调用NavMenu.vue

<template>
  <div id="app">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu default-active="authManage" class="el-menu-vertical-demo" @select="menuSelected" background-color="#333743"
      text-color="#909399" active-text-color="#909399" :collapse="isCollapse">
      <NavMenu :navMenus="leftMenus"></NavMenu>
    </el-menu>
  </div>
</template>

菜单栏数据源

let dataList = [
      {
        "entity": {
          "id": 1,
          "parentMenuId": 0,
          "name": "systemManage",
          "icon": "el-icon-message\r\n",
          "alias": "系统管理",
          "state": "ENABLE",
          "sort": 0,
          "value": null,
          "type": "NONE",
          "discription": "用于系统管理的菜单",
          "createUserId": 1
        },
        "childs": [
          {
            "entity": {
              "id": 3,
              "parentMenuId": 1,
              "name": "authManage",
              "icon": "el-icon-loading",
              "alias": "权限管理",
              "state": "ENABLE",
              "sort": 0,
              "value": "/system/auth",
              "type": "LINK",
              "discription": "用于权限管理的菜单",
              "createUserId": 1
            },
            "childs": null
          },
          {
            "entity": {
              "id": 4,
              "parentMenuId": 1,
              "name": "roleManage",
              "icon": "el-icon-bell",
              "alias": "角色管理",
              "state": "ENABLE",
              "sort": 1,
              "value": "/system/role",
              "type": "LINK",
              "discription": "用于角色管理的菜单",
              "createUserId": 1
            },
            "childs": null
          },
          {
            "entity": {
              "id": 2,
              "parentMenuId": 1,
              "name": "menuManage",
              "icon": "el-icon-edit",
              "alias": "菜单管理",
              "state": "ENABLE",
              "sort": 2,
              "value": "/system/menu",
              "type": "LINK",
              "discription": "用于菜单管理的菜单",
              "createUserId": 1
            },
            "childs": null
          },
          {
            "entity": {
              "id": 5,
              "parentMenuId": 1,
              "name": "groupManage",
              "icon": "el-icon-mobile-phone\r\n",
              "alias": "分组管理",
              "state": "ENABLE",
              "sort": 3,
              "value": "/system/group",
              "type": "LINK",
              "discription": "用于分组管理的菜单",
              "createUserId": 1
            },
            "childs": null
          }
        ]
      },
      {
        "entity": {
          "id": 6,
          "parentMenuId": 0,
          "name": "userManage",
          "icon": "el-icon-news",
          "alias": "用户管理",
          "state": "ENABLE",
          "sort": 1,
          "value": null,
          "type": "NONE",
          "discription": "用于用户管理的菜单",
          "createUserId": 1
        },
        "childs": [
          {
            "entity": {
              "id": 7,
              "parentMenuId": 6,
              "name": "accountManage",
              "icon": "el-icon-phone-outline\r\n",
              "alias": "帐号管理",
              "state": "ENABLE",
              "sort": 0,
              "value": "",
              "type": "NONE",
              "discription": "用于帐号管理的菜单",
              "createUserId": 1
            },
            "childs": [
              {
                "entity": {
                  "id": 14,
                  "parentMenuId": 7,
                  "name": "emailManage",
                  "icon": "el-icon-sold-out\r\n",
                  "alias": "邮箱管理",
                  "state": "ENABLE",
                  "sort": 0,
                  "value": "/content/email",
                  "type": "LINK",
                  "discription": "用于邮箱管理的菜单",
                  "createUserId": 1
                },
                "childs": null
              },
              {
                "entity": {
                  "id": 13,
                  "parentMenuId": 7,
                  "name": "passManage",
                  "icon": "el-icon-service\r\n",
                  "alias": "密码管理",
                  "state": "ENABLE",
                  "sort": 1,
                  "value": "/content/pass",
                  "type": "LINK",
                  "discription": "用于密码管理的菜单",
                  "createUserId": 1
                },
                "childs": null
              }
            ]
          },
          {
            "entity": {
              "id": 8,
              "parentMenuId": 6,
              "name": "integralManage",
              "icon": "el-icon-picture",
              "alias": "积分管理",
              "state": "ENABLE",
              "sort": 1,
              "value": "/user/integral",
              "type": "LINK",
              "discription": "用于积分管理的菜单",
              "createUserId": 1
            },
            "childs": null
          }
        ]
      },
      {
        "entity": {
          "id": 9,
          "parentMenuId": 0,
          "name": "contentManage",
          "icon": "el-icon-rank",
          "alias": "内容管理",
          "state": "ENABLE",
          "sort": 2,
          "value": null,
          "type": "NONE",
          "discription": "用于内容管理的菜单",
          "createUserId": 1
        },
        "childs": [
          {
            "entity": {
              "id": 10,
              "parentMenuId": 9,
              "name": "classifyManage",
              "icon": "el-icon-printer",
              "alias": "分类管理",
              "state": "ENABLE",
              "sort": 0,
              "value": "/content/classify",
              "type": "LINK",
              "discription": "用于分类管理的菜单",
              "createUserId": 1
            },
            "childs": null
          },
          {
            "entity": {
              "id": 11,
              "parentMenuId": 9,
              "name": "articleManage",
              "icon": "el-icon-star-on",
              "alias": "文章管理",
              "state": "ENABLE",
              "sort": 1,
              "value": "/content/article",
              "type": "LINK",
              "discription": "用于文章管理的菜单",
              "createUserId": 1
            },
            "childs": null
          },
          {
            "entity": {
              "id": 12,
              "parentMenuId": 9,
              "name": "commentManage",
              "icon": "el-icon-share",
              "alias": "评论管理",
              "state": "ENABLE",
              "sort": 2,
              "value": "/content/comment",
              "type": "LINK",
              "discription": "用于评论管理的菜单",
              "createUserId": 1
            },
            "childs": null
          }
        ]
      }
    ]

效果展示：

在这里插入图片描述

二：处理NavMenu菜单栏折叠文本不隐藏问题：

问题如图：

第一步：

安装：vue-fragment

cnpm install --save vue-fragment

第二步：

在main.js中引入

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

第三步:

将NavMenu.vue中的

修改为即可

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

效果如图：

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^