Vue 实现动态渲染 Element组件 Menu

前言

在学习 Vue 时，我们都会写关于管理系统的项目，在管理项目中，我们必然会处理菜单模块，通常我们会使用 Element 这个UI框架,但官方案例是静态数据，而在实际项目需求中，我们经常会实现多级菜单的动态渲染，今天我们实现这一需求，实现 Vue 动态菜单的渲染。

正文部分

一、动态数据格式

动态菜单的数据格式，我们一般会使用树形结构，如下代码所示：

[
    {
      menuName: "首页",
      menuId: 1,
      parentId: 0,
      menuIcon: "el-icon-s-home",
      url: "/index",
    },
    {
      menuName: "个人信息",
      menuId: 2,
      parentId: 0,
      menuIcon: "el-icon-user-solid",
      url: "/userInfo",
    },
    {
      menuName: "系统设置",
      menuId: 3,
      parentId: 0,
      menuIcon: "el-icon-video-camera-solid",
      url: "/system/userList",
      childNode: [
        {
          menuName: "用户列表",
          menuId: 300,
          parentId: 3,
          menuIcon: "el-icon-video-camera-solid",
          url: "/system/userList",
        },
        {
          menuName: "角色权限",
          menuId: 301,
          parentId: 3,
          menuIcon: "el-icon-video-camera-solid",
          url: "/system/role",
        }
      ],
    },
 ]

二、Vue 代码实现

1、template 模块代码

<template>
  <el-menu
    mode="vertical"
    :default-active="defaultActive"
    unique-opened
    router
  >
    <el-menu-item
      :index="child.url"
      v-for="child in noChildNodeList"
      :key="child.menuId"
    >
      <i :class="child.menuIcon"></i>
      <span slot="title">{{ child.menuName }}</span>
    </el-menu-item>
    <el-submenu
      v-for="child in hasChildNodeList"
      :key="child.id"
      :index="child.url"
    >
      <template slot="title">
        <i :class="child.menuIcon"></i>
        <span>{{ child.menuName }}</span>
      </template>
      <el-menu-item
        v-for="childnode in child.childNode"
        :key="childnode.menuId"
        :index="childnode.url"
      >
        <i :class="childnode.menuIcon"></i>
        <span slot="title">{{ childnode.menuName }}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

2、script 模块代码

<script>
export default {
  data() {
    return {
      navbarList: [],
      menuList: [
        {
          menuName: "首页",
          menuId: 1,
          parentId: 0,
          menuIcon: "el-icon-s-home",
          url: "/index",
        },
        {
          menuName: "个人信息",
          menuId: 2,
          parentId: 0,
          menuIcon: "el-icon-user-solid",
          url: "/userInfo",
        },
        {
          menuName: "系统设置",
          menuId: 3,
          parentId: 0,
          menuIcon: "el-icon-video-camera-solid",
          url: "/system/userList",
          childNode: [
            {
              menuName: "用户列表",
              menuId: 300,
              parentId: 3,
              menuIcon: "el-icon-video-camera-solid",
              url: "/system/userList",
            },
            {
              menuName: "角色权限",
              menuId: 301,
              parentId: 3,
              menuIcon: "el-icon-video-camera-solid",
              url: "/system/role",
            }
          ],
        },
      ],
    };
  },
  computed: {
    noChildNodeList() {
      return this.menuList.filter((item) => {
        return !item.childNode;
      });
    },
    hasChildNodeList() {
      return this.menuList.filter((item) => {
        return item.childNode;
      });
    },
  },
};
</script>

3、style 模块代码

    <style lang="scss" scoped>
    .el-menu {
      background-color: #b8d8f1;
      color: #007bff;
    }
    .el-menu-item.is-active {
      color: #ecf5ff;
      background-color: #007bff;
    }
    ​
    .el-menu-item {
      color: #007bff;
      border-bottom: 2px solid #eee;
      i {
        color: inherit;
      }
    }
    ::v-deep .el-submenu__title {
      color: #007bff;
    }
    ::v-deep .el-submenu__title i {
      color: #007bff;
    }
    <style>

三、菜单效果图

总结

实现以上需求，有很多种方案方式，如果有更好的方法，欢迎交流沟通。