map处理后台管理菜单数据,转换成树形层级结构数据

已于 2022-08-30 09:49:34 修改
阅读量669 收藏 1
点赞数
分类专栏： vue vue3.0 javascript 文章标签： servlet java 数据库
于 2022-07-21 19:17:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwf1225/article/details/125919141
版权
vue 同时被 3 个专栏收录
135 篇文章 6 订阅
订阅专栏
javascript
39 篇文章 1 订阅
订阅专栏
vue3.0
14 篇文章 1 订阅
订阅专栏

1.文件 index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script src="./index.js"></script>

</body>

</html>

2.文件  index.js:

let data2 =  [

    { id: '10000', parentId: null, name: '账号管理' },

    { id: '11000', parentId: '10000', name: '用户管理' },

    { id: '11100', parentId: '11000', name: '查看' },

    { id: '11110', parentId: '11100', name: '用户列表' },

    { id: '11200', parentId: '11000', name: '编辑' },

    { id: '11210', parentId: '11200', name: '用户列表' },

    { id: '11220', parentId: '11200', name: '新增用户' },

    { id: '11300', parentId: '11000', name: '操作' },

    { id: '11310', parentId: '11300', name: '新增' },

    { id: '11320', parentId: '11300', name: '删除' },

    { id: '11330', parentId: '11300', name: '修改' },

    { id: '12000', parentId: '10000', name: '角色管理' },

    { id: '12100', parentId: '12000', name: '查看' },

    { id: '12110', parentId: '12100', name: '角色列表' },

    { id: '12200', parentId: '12000', name: '编辑' },

    { id: '122100', parentId: '12200', name: '角色列表' },

    { id: '12220', parentId: '12200', name: '新增角色' },

    { id: '12300', parentId: '12000', name: '操作' },

    { id: '12310', parentId: '12300', name: '新增' },

    { id: '12320', parentId: '12300', name: '删除' },

    { id: '12330', parentId: '12300', name: '修改' },

    { id: '20000', parentId: null, name: '个人中心' },

    { id: '21000', parentId: '20000', name: '个性化设置' },

    { id: '21100', parentId: '21000', name: '查看' },

    { id: '21110', parentId: '21100', name: '信息列表' },

    { id: '21200', parentId: '21000', name: '操作' },

    { id: '21210', parentId: '21200', name: '重置信息' },

    { id: '22000', parentId: '20000', name: '账户管理' },

    { id: '22100', parentId: '22000', name: '查看' },

    { id: '22110', parentId: '22100', name: '账户余额' },

    { id: '22120', parentId: '22100', name: '帐变记录' }

  ]

let data = [

  {

    id: "13",

    createdAt: "2021-07-17 23:32:16",

    updatedAt: "2021-07-17 23:32:16",

    title: "查询",

    parentId: "12",

    type: 2,

    typeLabel: "按钮",

    permission: "SysRole:retrieve",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564280197120",

    name: "1550072564280197120",

    meta: { title: "查询", affix: false, icon: null },

    idStr: "13",

  },

  {

    id: "18",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "查询",

    parentId: "17",

    type: 2,

    typeLabel: "按钮",

    permission: "SysUser:retrieve",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564280197121",

    name: "1550072564280197121",

    meta: { title: "查询", affix: false, icon: null },

    idStr: "18",

  },

  {

    id: "43",

    createdAt: "2021-07-17 23:32:21",

    updatedAt: "2021-07-17 23:32:21",

    title: "查询",

    parentId: "42",

    type: 2,

    typeLabel: "按钮",

    permission: "SysLog:retrieve",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564284391424",

    name: "1550072564284391424",

    meta: { title: "查询", affix: false, icon: null },

    idStr: "43",

  },

  {

    id: "50",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "地图首页",

    parentId: null,

    type: 0,

    typeLabel: "目录",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564284391425",

    name: "1550072564284391425",

    meta: { title: "地图首页", affix: false, icon: null },

    idStr: "50",

  },

  {

    id: "51",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "浏览",

    parentId: "50",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564284391426",

    meta: { title: "浏览", affix: false, icon: null },

    idStr: "51",

  },

  {

    id: "58",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "信息显示",

    parentId: "57",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564284391427",

    meta: { title: "信息显示", affix: false, icon: null },

    idStr: "58",

  },

  {

    id: "66",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "数据采集",

    parentId: "65",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564284391428",

    meta: { title: "数据采集", affix: false, icon: null },

    idStr: "66",

  },

  {

    id: "67",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "开始",

    parentId: "66",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564288585728",

    name: "1550072564288585728",

    meta: { title: "开始", affix: false, icon: null },

    idStr: "67",

  },

  {

    id: "70",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "接收机数据",

    parentId: "69",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564288585729",

    meta: { title: "接收机数据", affix: false, icon: null },

    idStr: "70",

  },

  {

    id: "71",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "浏览",

    parentId: "70",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564288585730",

    name: "1550072564288585730",

    meta: { title: "浏览", affix: false, icon: null },

    idStr: "71",

  },

  {

    id: "74",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "浏览",

    parentId: "73",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564288585731",

    name: "1550072564288585731",

    meta: { title: "浏览", affix: false, icon: null },

    idStr: "74",

  },

  {

    id: "80",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "浏览",

    parentId: "79",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564288585732",

    name: "1550072564288585732",

    meta: { title: "浏览", affix: false, icon: null },

    idStr: "80",

  },

  {

    id: "83",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "点选",

    parentId: "82",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564288585733",

    meta: { title: "点选", affix: false, icon: null },

    idStr: "83",

  },

  {

    id: "91",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "浏览",

    parentId: "90",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 1,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564292780032",

    name: "1550072564292780032",

    meta: { title: "浏览", affix: false, icon: null },

    idStr: "91",

  },

  {

    id: "12",

    createdAt: "2021-07-17 23:32:16",

    updatedAt: "2021-07-17 23:32:16",

    title: "角色权限",

    parentId: "1",

    type: 1,

    typeLabel: "菜单",

    permission: "SysRole",

    icon: "http://58.57.119.9:8989/visual_map_file/shezhitianchong.svg",

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "@/views/permissionManage/index.vue",

    externalLink: null,

    path: "/@/views/permissionManage/index.vue",

    name: "1550072564292780033",

    meta: {

      title: "角色权限",

      affix: false,

      icon: "http://58.57.119.9:8989/visual_map_file/shezhitianchong.svg",

    },

    idStr: "12",

  },

  {

    id: "14",

    createdAt: "2021-07-17 23:32:16",

    updatedAt: "2021-07-17 23:32:16",

    title: "新增",

    parentId: "12",

    type: 2,

    typeLabel: "按钮",

    permission: "SysRole:create",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564292780034",

    name: "1550072564292780034",

    meta: { title: "新增", affix: false, icon: null },

    idStr: "14",

  },

  {

    id: "19",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "新增",

    parentId: "17",

    type: 2,

    typeLabel: "按钮",

    permission: "SysUser:create",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564292780035",

    name: "1550072564292780035",

    meta: { title: "新增", affix: false, icon: null },

    idStr: "19",

  },

  {

    id: "52",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "搜索",

    parentId: "50",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564292780036",

    meta: { title: "搜索", affix: false, icon: null },

    idStr: "52",

  },

  {

    id: "57",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "接收机",

    parentId: null,

    type: 0,

    typeLabel: "目录",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564296974336",

    name: "1550072564296974336",

    meta: { title: "接收机", affix: false, icon: null },

    idStr: "57",

  },

  {

    id: "59",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "信息编辑",

    parentId: "57",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564296974337",

    meta: { title: "信息编辑", affix: false, icon: null },

    idStr: "59",

  },

  {

    id: "64",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "导出",

    parentId: "62",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564296974338",

    name: "1550072564296974338",

    meta: { title: "导出", affix: false, icon: null },

    idStr: "64",

  },

  {

    id: "68",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "开始计算",

    parentId: "66",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564296974339",

    name: "1550072564296974339",

    meta: { title: "开始计算", affix: false, icon: null },

    idStr: "68",

  },

  {

    id: "72",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "导出",

    parentId: "70",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564296974340",

    name: "1550072564296974340",

    meta: { title: "导出", affix: false, icon: null },

    idStr: "72",

  },

  {

    id: "73",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "定位数据",

    parentId: "69",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564296974341",

    meta: { title: "定位数据", affix: false, icon: null },

    idStr: "73",

  },

  {

    id: "75",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "导出",

    parentId: "73",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564301168640",

    name: "1550072564301168640",

    meta: { title: "导出", affix: false, icon: null },

    idStr: "75",

  },

  {

    id: "81",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "下载",

    parentId: "79",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564301168641",

    name: "1550072564301168641",

    meta: { title: "下载", affix: false, icon: null },

    idStr: "81",

  },

  {

    id: "84",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "圈选",

    parentId: "82",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564301168642",

    meta: { title: "圈选", affix: false, icon: null },

    idStr: "84",

  },

  {

    id: "92",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "上传",

    parentId: "90",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 2,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564301168643",

    name: "1550072564301168643",

    meta: { title: "上传", affix: false, icon: null },

    idStr: "92",

  },

  {

    id: "17",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "用户管理",

    parentId: "1",

    type: 1,

    typeLabel: "菜单",

    permission: "SysUser",

    icon: "http://58.57.119.9:8989/visual_map_file/yonghu.svg",

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: "@/views/permissionManage/index.vue",

    externalLink: null,

    path: "/@/views/permissionManage/index.vue",

    name: "1550072564301168644",

    meta: {

      title: "用户管理",

      affix: false,

      icon: "http://58.57.119.9:8989/visual_map_file/yonghu.svg",

    },

    idStr: "17",

  },

  {

    id: "22",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "启用/禁用（用户）",

    parentId: "17",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564301168645",

    name: "1550072564301168645",

    meta: { title: "启用/禁用（用户）", affix: false, icon: null },

    idStr: "22",

  },

  {

    id: "23",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "启用/禁用（角色）",

    parentId: "12",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564305362944",

    name: "1550072564305362944",

    meta: { title: "启用/禁用（角色）", affix: false, icon: null },

    idStr: "23",

  },

  {

    id: "53",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "图例",

    parentId: "50",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564305362945",

    meta: { title: "图例", affix: false, icon: null },

    idStr: "53",

  },

  {

    id: "60",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "新增点位",

    parentId: "57",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564305362946",

    meta: { title: "新增点位", affix: false, icon: null },

    idStr: "60",

  },

  {

    id: "65",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "数据采集",

    parentId: null,

    type: 0,

    typeLabel: "目录",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564305362947",

    name: "1550072564305362947",

    meta: { title: "数据采集", affix: false, icon: null },

    idStr: "65",

  },

  {

    id: "76",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "开始计算",

    parentId: "73",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564305362948",

    name: "1550072564305362948",

    meta: { title: "开始计算", affix: false, icon: null },

    idStr: "76",

  },

  {

    id: "79",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "采集数据",

    parentId: "69",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564309557248",

    meta: { title: "采集数据", affix: false, icon: null },

    idStr: "79",

  },

  {

    id: "86",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "框选",

    parentId: "82",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564309557249",

    meta: { title: "框选", affix: false, icon: null },

    idStr: "86",

  },

  {

    id: "93",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "显示/隐藏",

    parentId: "90",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 3,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564309557250",

    name: "1550072564309557250",

    meta: { title: "显示/隐藏", affix: false, icon: null },

    idStr: "93",

  },

  {

    id: "16",

    createdAt: "2021-07-17 23:32:16",

    updatedAt: "2021-07-17 23:32:16",

    title: "编辑",

    parentId: "12",

    type: 2,

    typeLabel: "按钮",

    permission: "SysRole:update",

    icon: null,

    sort: 4,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564309557251",

    name: "1550072564309557251",

    meta: { title: "编辑", affix: false, icon: null },

    idStr: "16",

  },

  {

    id: "21",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "编辑",

    parentId: "17",

    type: 2,

    typeLabel: "按钮",

    permission: "SysUser:update",

    icon: null,

    sort: 4,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564309557252",

    name: "1550072564309557252",

    meta: { title: "编辑", affix: false, icon: null },

    idStr: "21",

  },

  {

    id: "54",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "地图切换",

    parentId: "50",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 4,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564309557253",

    meta: { title: "地图切换", affix: false, icon: null },

    idStr: "54",

  },

  {

    id: "61",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "数据下载",

    parentId: "57",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 4,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564313751552",

    meta: { title: "数据下载", affix: false, icon: null },

    idStr: "61",

  },

  {

    id: "69",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "数据查询",

    parentId: null,

    type: 0,

    typeLabel: "目录",

    permission: "",

    icon: null,

    sort: 4,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564313751553",

    name: "1550072564313751553",

    meta: { title: "数据查询", affix: false, icon: null },

    idStr: "69",

  },

  {

    id: "77",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "查看热力图",

    parentId: "73",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 4,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564313751554",

    name: "1550072564313751554",

    meta: { title: "查看热力图", affix: false, icon: null },

    idStr: "77",

  },

  {

    id: "87",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "多边形选",

    parentId: "82",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 4,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564313751555",

    meta: { title: "多边形选", affix: false, icon: null },

    idStr: "87",

  },

  {

    id: "94",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "查看",

    parentId: "90",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 4,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564313751556",

    name: "1550072564313751556",

    meta: { title: "查看", affix: false, icon: null },

    idStr: "94",

  },

  {

    id: "15",

    createdAt: "2021-07-17 23:32:16",

    updatedAt: "2021-07-17 23:32:16",

    title: "删除",

    parentId: "12",

    type: 2,

    typeLabel: "按钮",

    permission: "SysRole:delete",

    icon: null,

    sort: 5,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564317945856",

    name: "1550072564317945856",

    meta: { title: "删除", affix: false, icon: null },

    idStr: "15",

  },

  {

    id: "20",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "删除",

    parentId: "17",

    type: 2,

    typeLabel: "按钮",

    permission: "SysUser:delete",

    icon: null,

    sort: 5,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564317945857",

    name: "1550072564317945857",

    meta: { title: "删除", affix: false, icon: null },

    idStr: "20",

  },

  {

    id: "55",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "视角切换",

    parentId: "50",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 5,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564317945858",

    meta: { title: "视角切换", affix: false, icon: null },

    idStr: "55",

  },

  {

    id: "62",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "告警查询",

    parentId: "57",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 5,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564317945859",

    meta: { title: "告警查询", affix: false, icon: null },

    idStr: "62",

  },

  {

    id: "78",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "更改类型",

    parentId: "73",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 5,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564317945860",

    name: "1550072564317945860",

    meta: { title: "更改类型", affix: false, icon: null },

    idStr: "78",

  },

  {

    id: "82",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "地图工具",

    parentId: null,

    type: 0,

    typeLabel: "目录",

    permission: "",

    icon: null,

    sort: 5,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564317945861",

    name: "1550072564317945861",

    meta: { title: "地图工具", affix: false, icon: null },

    idStr: "82",

  },

  {

    id: "88",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "测距",

    parentId: "82",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 5,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564322140160",

    meta: { title: "测距", affix: false, icon: null },

    idStr: "88",

  },

  {

    id: "95",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "编辑",

    parentId: "90",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 5,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564322140161",

    name: "1550072564322140161",

    meta: { title: "编辑", affix: false, icon: null },

    idStr: "95",

  },

  {

    id: "1",

    createdAt: "2021-06-01 17:16:48",

    updatedAt: "2021-06-02 17:14:16",

    title: "系统管理",

    parentId: null,

    type: 0,

    typeLabel: "目录",

    permission: "Sys",

    icon: null,

    sort: 6,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564322140162",

    name: "1550072564322140162",

    meta: { title: "系统管理", affix: false, icon: null },

    idStr: "1",

  },

  {

    id: "45",

    createdAt: "2021-07-17 23:39:41",

    updatedAt: "2021-07-17 23:39:41",

    title: "重置某用户密码",

    parentId: "17",

    type: 2,

    typeLabel: "按钮",

    permission: "SysUser:resetPassword",

    icon: null,

    sort: 6,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564322140163",

    name: "1550072564322140163",

    meta: { title: "重置某用户密码", affix: false, icon: null },

    idStr: "45",

  },

  {

    id: "48",

    createdAt: "2022-06-29 19:17:33",

    updatedAt: "2022-06-29 19:17:38",

    title: "绑定角色与菜单关联关系",

    parentId: "12",

    type: 2,

    typeLabel: "按钮",

    permission: "SysRole:bindMenus",

    icon: null,

    sort: 6,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564322140164",

    name: "1550072564322140164",

    meta: { title: "绑定角色与菜单关联关系", affix: false, icon: null },

    idStr: "48",

  },

  {

    id: "56",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "信息显隐",

    parentId: "50",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 6,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564322140165",

    meta: { title: "信息显隐", affix: false, icon: null },

    idStr: "56",

  },

  {

    id: "63",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "浏览",

    parentId: "62",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 6,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564326334464",

    name: "1550072564326334464",

    meta: { title: "浏览", affix: false, icon: null },

    idStr: "63",

  },

  {

    id: "89",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "测面",

    parentId: "82",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 6,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564326334465",

    meta: { title: "测面", affix: false, icon: null },

    idStr: "89",

  },

  {

    id: "96",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "删除",

    parentId: "90",

    type: 2,

    typeLabel: "按钮",

    permission: "",

    icon: null,

    sort: 6,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564326334466",

    name: "1550072564326334466",

    meta: { title: "删除", affix: false, icon: null },

    idStr: "96",

  },

  {

    id: "47",

    createdAt: "2021-07-17 23:40:47",

    updatedAt: "2021-07-17 23:41:15",

    title: "踢某用户下线",

    parentId: "17",

    type: 2,

    typeLabel: "按钮",

    permission: "SysUser:kickOut",

    icon: null,

    sort: 7,

    status: 1,

    statusLabel: "启用",

    component: "LAYOUT",

    externalLink: null,

    path: "/1550072564326334467",

    name: "1550072564326334467",

    meta: { title: "踢某用户下线", affix: false, icon: null },

    idStr: "47",

  },

  {

    id: "90",

    createdAt: "2021-07-17 23:32:17",

    updatedAt: "2021-07-17 23:32:17",

    title: "图层导入",

    parentId: "82",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 7,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564326334468",

    meta: { title: "图层导入", affix: false, icon: null },

    idStr: "90",

  },

  {

    id: "42",

    createdAt: "2021-07-17 23:32:21",

    updatedAt: "2021-07-17 23:32:21",

    title: "系统日志",

    parentId: "1",

    type: 1,

    typeLabel: "菜单",

    permission: "SysLog",

    icon: "http://58.57.119.9:8989/visual_map_file/rizhi.svg",

    sort: 8,

    status: 1,

    statusLabel: "启用",

    component: "@/views/logManage/index.vue",

    externalLink: null,

    path: "/@/views/logManage/index.vue",

    name: "1550072564326334469",

    meta: {

      title: "系统日志",

      affix: false,

      icon: "http://58.57.119.9:8989/visual_map_file/rizhi.svg",

    },

    idStr: "42",

  },

  {

    id: "44",

    createdAt: "2021-07-17 23:37:26",

    updatedAt: "2021-07-17 23:38:28",

    title: "修改当前用户密码",

    parentId: "1",

    type: 1,

    typeLabel: "菜单",

    permission: "",

    icon: null,

    sort: 9,

    status: 1,

    statusLabel: "启用",

    component: null,

    externalLink: null,

    path: null,

    name: "1550072564330528768",

    meta: { title: "修改当前用户密码", affix: false, icon: null },

    idStr: "44",

  },

];

// console.log('data==',data);

// 封装方法，引入使用

// export function menu2Tree(items: any) {

//   const data = JSON.parse(JSON.stringify(items)) // 深拷贝不改变源数据

//   const result = []

//   if (!Array.isArray(data)) {

//       return result

//   }

//   data.forEach((item) => {

//       delete item.children

//   })

//   const map = {}

//   data.forEach((item) => {

//       map[item.id] = item

//   })

//   console.log('map==',map);

//   data.forEach((item) => {

//       const parent = map[item.parentId]

//       if (parent) {

//           ;(parent.children || (parent.children = [])).push(item)

//       } else {

//           // @ts-ignore

//           result.push(item)

//       }

//   })

//   console.log('result', result)

//   return result

// }

const result = []

  data.forEach((item) => {

      delete item.children

  })

  const map = {}

  data.forEach((item) => {

      map[item.id] = item

  })

  // 获取id的map对象

  console.log('map==',map);

  data.forEach((item) => {

    // 根据map对象筛选parentId的数据

      const parent = map[item.parentId]

      console.log('parent==',parent);

      // 如果存在parentId说明属于子节点，push到children数组里，如果不存在parentId说明是顶级父节点，直接push到最终的result里

      if (parent) {

          ;(parent.children || (parent.children = [])).push(item)

      } else {

          // @ts-ignore

          result.push(item)

      }

  })

  // 得到最终的数据

  console.log('result', result)

wwf1225
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
map遍历顺序和保存顺序_树遍历–顺序，预顺序和后顺序
culing2941的博客
09-17 880
Here you will learn about tree traversal with program example. 在这里，您将通过程序示例了解有关树遍历的信息。 Tree is a subset of Graph data structure where the number of edges are exactly one less than the number of vert...
java 树形数据处理（Stream流和Map两种方式实现）
Yi_Ran_2018的博客
11-09 2128
java 树形数据处理
vue扁平数据转树形结构递归组件渲染
Suk__的博客
04-25 498
这里使用的是用map映射id和自身然后遍历通过parentid找父级的方法 源扁平数据: { "code": 200, "message": "操作成功", "data": [ { "functionId": 10000, "parentFunctionId": 0, "functionName": "安全检测" }, { "funct
通过Map映射替代递归形成一个层级树形结构数据
weixin_45238785的博客
06-30 608
最近项目中遇到了层级树形结构，数据库存放着的是节点id，以及节点的父节点，刚开始是通过递归节点id作为下一层父节点id的形式，用很多条sql来进行查询直接得出的，，但是由于随着层数以及数据的增加，而且同一层级之间涉及到菜单优先级排序的问题，递归的sql及时是组装一起进行批量查询也需要将近 2s 的时间，这对于一个查询来说无疑是很慢的。因此后面更换了一种思路，通过一次性查询出所有的节点，最后在进行拼装。 ...
详解set/map的底层结构——AVL树和红黑树
zcxmjw的博客
05-12 995
二叉搜索树虽可以缩短查找的效率，但如果数据有序或接近有序二叉搜索树将退化为单支树，查找元素相当于在顺序表中搜索元素，效率低下。当向二叉搜索树中插入新结点后，如果能保证每个结点的左右子树高度之差的绝对值不超过1(需要对树中的结点进行调整)，即可降低树的高度，从而减少平均搜索长度。AVL树的规则如下1.它的左右子树都是AVL树2.左右子树高度之差(这里我们简称为平衡因子)的绝对值不超过1如果一棵二叉搜索树是高度平衡的，它就是AVL树。如果它有n个结点，其高度可保持在logN，搜索时间复杂度logN。
list转换成树形结构
涵山韵海的博客
07-02 1717
list转换成树形结构 开发中常常遇到查出来是list，但需要转换成树形结构，特别是遇到省、市、县、区或者部门角色查询等，这时候可以在sql语句中处理，也可以在代码中转换，先将代码中处理方式贴出来 public static List<Map> convertToTree(List<Map> list) { List<Map> all = list.stream().filter(t -> !t.containsKey("parent
java实现构造无限层级树形菜单
08-29
java 实现构造无限层级树形菜单是指通过 java 语言来构建一个无限层级的树形菜单结构，该结构可以应用于各种场景，如菜单系统、目录树、组织结构等。下面将介绍如何使用 java 实现构造无限层级树形菜单。 一、构建...
ES6中Set和Map数据结构，Map与其它数据结构互相转换操作实例详解
10-17
主要介绍了ES6中Set和Map数据结构，Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下
动态在线Map/Reduce流数据处理模型及作业拓扑管理协议
02-08
同时为该系统定义一组关于作业的建立、管理和维护的通信规程,即拓扑管理协议.SPATE系统解决了在线Map/Reduce流数据处理过程中要求实时性及可扩展性的问题.实验验证了拓扑管理协议的有效性,拓扑管理协议能有效管理...
js 将线性数据转为树形的示例代码
10-16
"兰桂坊" }, { id: 9, parent_id: 2, name: "东莞市" }, { id: 10, parent_id: 9, name: "长安镇" }, { id: 11, "parent_id": 3, "name": "南昌市" }]在这个示例中，我们需要将给定的线性数据转换成树形结构。...
树形菜单 前台后台完整的代码
09-12
有预览图，要html效果，有jsp代码，使用者只需要在后台构建一个json对象，返回json数据，这里我都给你写好了，只需要直接使用。我这里从后台返回的数据存放在json.txt里。在html页面中也是这几存放。 另一个jsp页面有详细继承了sturts2标签的应用。 后台通过递归来获取树状结构的方法。
强大后台管理的树形目录源码
07-17
强大后台管理的树形目录源码，可自由添加、修改、删除节点，也很漂亮的树
java list 转 树型结构
u010783161的博客
11-23 412
package com.edu.study.normal; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.LinkedHashMap; import java.util.List; import java.util.Map; public cla...
操作树形数据方法封装：获取树形数据的某个值、给树形数据每层添加属性
二三的博客
11-20 1468
对于常规数组来说，我们想要获取某一个值，或者给每层添加属性，只需要使用fileter、map等等的方法，相对来说比较简单。树形数据不同于常规的数组数据，不能确定其内部包含多少个子节点，即children。所以我们在操作树形数据的时候，不同于常规数据。其实操作树形数据也很简单，其核心就是递归。
通过构造树形结构介绍map的用法
最新发布
Mr_TianSDQ的博客
11-13 302
当我们拿到的数据与我们要用的数据不一致时，就要改造成自己想要的数据结构。map方法：拿到一个数组的部分或全部数据，重新构造一个数组并返回。
巧用map把数组对象转换成Tree
mingwei_zhu的博客
03-30 1561
对象数组转换成tree
HashMap和红黑树B树B+树
qq_46724069的博客
03-29 334
node 默认大小 16HashMap 内部存储结构静态内部类 Node implements 了 Map 接口内部的接口在JDK1.8之后,java对HashMap做了改进，当链表的长度大于8的时候，后面的数据存储在红黑树中，以便加快检索的速度负载因子：默认值为0.75大于大于小于本质上是一个二叉查找树，在二叉查找树基础上，增加了着色和相关的性质使红黑树相对平衡，从而保证了，query，insert，delete的时间复杂度最坏为O(log n), 加快检索速率。.....
后台管理菜单树
qq_35803379的博客
10-22 152
需要在表中设计一级菜单，二级菜单的字段，一级菜单与二级菜单是1对关系，可以用union的方法将表垂直排序不过当有N级菜单的时候就很鸡肋写sql的时候 前台需要定义实体类来接受 且实体类定义当前类的集合并赋值为空不然在进行添加会出现空指针异常，然后在业务层的时候 首先定义map用来装父类然后循环集合将菜单字段的id取出来判断如果是一级就直接放到map里面然后增强for循环取出来每个的子集id和他的父类判断如果相等就放到里面集合里面的父类的list成员变量里面去 这样就可以完成无限级数然后将返回的结果放到re
java中ListMap树形结构的集合，进行逐级汇总的抽象
凡江林的博客
09-29 1266
1. map1中累加map2中某个指定key的值（针对数值类型） （1）如果map1中不存在key对应的值，则把map2中对应key的值添加进map1中； （2）否则，map1中存在的值，和map2中存在的值，进行累加。代码如下所示： public static void addMapSameKey(Map<String, Object> map1, Map<String, Object> map2, String key) { if (map1.get(ke
java 中把 数据转换成 树形结构
05-23
在 Java 中，可以使用树形结构的数据结构来表示数据，并且可以通过递归来实现将一般的数据转换成树形结构。 例如，假设有以下数据格式： ``` { "name": "root", "children": [ { "name": "node1", "children": [ { "name": "leaf1" }, { "name": "leaf2" } ] }, { "name": "node2", "children": [ { "name": "leaf3" }, { "name": "leaf4" } ] } ] } ``` 可以定义一个节点类来表示每个节点： ```java public class TreeNode { private String name; private List<TreeNode> children; // getters and setters } ``` 然后，可以定义一个递归函数，将数据转换成树形结构： ```java private TreeNode convertToTree(Map<String, Object> data) { TreeNode node = new TreeNode(); node.setName((String) data.get("name")); List<Map<String, Object>> childrenData = (List<Map<String, Object>>) data.get("children"); if (childrenData != null) { List<TreeNode> children = new ArrayList<>(); for (Map<String, Object> childData : childrenData) { children.add(convertToTree(childData)); } node.setChildren(children); } return node; } ``` 使用方式如下： ```java Map<String, Object> data = // 从某个数据源获取数据 TreeNode root = convertToTree(data); ``` 这样就可以将数据转换成树形结构了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值