标题：Vue动态渲染 NavMenu 菜单

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

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

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

四、菜单效果图