前端使用递归把多级树形结构合并为一级结构

149 阅读1分钟

1、场景:

因为后台返回的路由是分模块的,而产品的需求是想要都作为一级展示:

后台返回数据的展示结构:

image.png

产品需要的展示结构:

image.png

2、数据

后台返回的数据格式是下面这种格式:

data:[{
        name: "账号权限",
        maxSort: 3,
        childRights: [{
          id: 6,
          rightName: "用户管理",
          rightParent: "账号权限",
          rightUrl: "user",
          sort: 3,
          gmtCreated: "2022-05-25T07:12:52.000+00:00",
          isDeleted: 0
        }, {
          id: 7,
          rightName: "角色管理",
          rightParent: "账号权限",
          rightUrl: "role",
          sort: 3,
          gmtCreated: "2022-05-25T07:12:54.000+00:00",
          isDeleted: 0
        }]
      },
      {
        name: "系统管理",
        maxSort: 4,
        childRights: [{
          id: 8,
          rightName: "站点管理",
          rightParent: "系统管理",
          rightUrl: "site",
          sort: 4,
          gmtCreated: "2022-05-25T07:12:58.000+00:00",
          isDeleted: 0
        }]
      }
    ]

而我要转成以下这种格式:

data:[{
        id: 6,
        rightName: "用户管理",
        rightParent: "账号权限",
        rightUrl: "user",
        sort: 3,
        gmtCreated: "2022-05-25T07:12:52.000+00:00",
        isDeleted: 0
      }, {
        id: 7,
        rightName: "角色管理",
        rightParent: "账号权限",
        rightUrl: "role",
        sort: 3,
        gmtCreated: "2022-05-25T07:12:54.000+00:00",
        isDeleted: 0
      },{
        id: 8,
        rightName: "站点管理",
        rightParent: "系统管理",
        rightUrl: "site",
        sort: 4,
        gmtCreated: "2022-05-25T07:12:58.000+00:00",
        isDeleted: 0
      }
    ]

3、方法

使用的是递归的思想,代码如下:

<script>
let arr = [{
        name: "账号权限",
        maxSort: 3,
        childRights: [{
          id: 6,
          rightName: "用户管理",
          rightParent: "账号权限",
          rightUrl: "user",
          sort: 3,
          gmtCreated: "2022-05-25T07:12:52.000+00:00",
          isDeleted: 0
        }, {
          id: 7,
          rightName: "角色管理",
          rightParent: "账号权限",
          rightUrl: "role",
          sort: 3,
          gmtCreated: "2022-05-25T07:12:54.000+00:00",
          isDeleted: 0
        }]
      },
      {
        name: "系统管理",
        maxSort: 4,
        childRights: [{
          id: 8,
          rightName: "站点管理",
          rightParent: "系统管理",
          rightUrl: "site",
          sort: 4,
          gmtCreated: "2022-05-25T07:12:58.000+00:00",
          isDeleted: 0
        }]
      }
    ]
  let arrTeap = []
  function mergeArr(obj) {
      if (obj.childRights.childRights) {
        mergeArr(obj.childRights)
      } else {
        for (let k = 0; k < obj.childRights.length; k++) {
          arrTeap.push(obj.childRights[k])
        }
      }
    }
   for (let i = 0; i < arr.length; i++) {
      mergeArr(arr[i])
    }
    console.log(arrTeap)
 </script>