vue 这种菜单数据怎么处理？

Question

菜单树用的是el-tree做的，这个树里面包括菜单和菜单下包含的按钮，后端给返回的数据是这个样子：

[
    {
        "id": 218,
        "code": "007",
        "name": "根菜单",
        "orderNum": 7,
        "url": "/",
        "icon": "imos-icon-dictionaries",
        "child": [
            {
                "id": 402,
                "code": "007002",
                "name": "二级菜单",
                "orderNum": 2,
                "url": "/aaa",
                "child": [
                    {
                        "id": 403,
                        "code": "007002001",
                        "name": "三级菜单",
                        "orderNum": 1,
                        "url": "/three",
                        "child": [],
                        "btnApiDate": [
                            {
                                "btnId": 100220,
                                "btnName": 添加",
                                "btnCode": "lala",
                                "apiId": 380,
                                "apiUrl": "/admin/btn/remove",
                                "apiType": "BUTTON"
                            }
                        ]
                    }
                ],
                "btnApiDate": [
                    {
                        "btnId": 0
                    }
                ]
            },
            {
                "id": 219,
                "code": "007001",
                "name": "根菜单二",
                "orderNum": 1,
                "url": "/dict",
                "child": [
                    {
                        "id": 404,
                        "code": "007001001",
                        "name": "二级菜单",
                        "orderNum": 1,
                        "url": "/sss",
                        "child": [],
                        "btnApiDate": [
                            {
                                "btnId": 100221,
                                "btnName": "asdasd",
                                "btnCode": "asdasd",
                                "apiId": 371,
                                "apiUrl": "/admin/user/",
                                "apiType": "BUTTON"
                            }
                        ]
                    }
                ],
                "btnApiDate": [
                    {
                        "btnId": 100075,
                        "btnName": "添加",
                        "btnCode": "dict_add",
                        "apiId": 357,
                        "apiUrl": "/admin/dict/create",
                        "apiType": "BUTTON"
                    },
                ]
            }
        ],
        "btnApiDate": [
            {
                "btnId": 0
            }
        ]
    },
]

btnApiDate代表的就是该菜单下包含的按钮数组，前端拿到数据需要处理一下将按钮放到对应的菜单child下，即把btnApiDate数据放到对应child下。

处理后的数据：

[
    {
        "id": 218,
        "code": "007",
        "name": "根菜单",
        "orderNum": 7,
        "url": "/",
        "icon": "imos-icon-dictionaries",
        "child": [
            {
                "id": 402,
                "code": "007002",
                "name": "二级菜单",
                "orderNum": 2,
                "url": "/aaa",
                "child": [
                    {
                        "id": 403,
                        "code": "007002001",
                        "name": "三级菜单",
                        "orderNum": 1,
                        "url": "/three",
                        "child": [{
                            "btnId": 100220,
                            "btnName": 添加",
                            "btnCode": "lala",
                            "apiId": 380,
                            "apiUrl": "/admin/btn/remove",
                            "apiType": "BUTTON"
                        }],
                    },
                    { 
                        "btnId": 100220,
                        "btnName": 添加",
                        "btnCode": "lala",
                        "apiId": 380,
                        "apiUrl": "/admin/btn/remove",
                        "apiType": "BUTTON"
                    }
                ],
                "btnApiDate": [
                    {
                        "btnId": 0
                    }
                ]
            },
            {
                "id": 219,
                "code": "007001",
                "name": "根菜单二",
                "orderNum": 1,
                "url": "/dict",
                "child": [
                    {
                        "id": 404,
                        "code": "007001001",
                        "name": "二级菜单",
                        "orderNum": 1,
                        "url": "/sss",
                        "child": [{
                            "btnId": 100221,
                            "btnName": "asdasd",
                            "btnCode": "asdasd",
                            "apiId": 371,
                            "apiUrl": "/admin/user/",
                            "apiType": "BUTTON"
                        }],
                    }
                ],
            }
        ],
        "btnApiDate": [
            {
                "btnId": 0
            }
        ]
    },
]

我现在各种循环虽然实现了展示，但是如果菜单层次太多的话，就会多一层循环，就显得雍总，就是求教大佬，如何封装成一个公共的方法调用。
我的实现方式：

handleRoleChange() {
      if (this.form.roleId) {
        getMenuList({
          appId: this.form.appId,
        }).then((res) => {
          if (!res) return;
          this.treeData = res;
          // console.log('this.treeData==>', this.treeData);
          res.forEach((i) => {
            // console.log('获取菜单id', i.id);
            if (i.child) {
              // 二级菜单且有页面的数据
              i.child.forEach((j) => {
                const { id: pid } = j;
                if (j.btnApiDate) {
                  for (let k = 0; k < j.btnApiDate.length; k++) {
                    const { btnId, btnName, btnCode, apiId, apiUrl, apiType } = j.btnApiDate[k];
                    if (btnId == 0) return;
                    j.child.unshift({
                      id: btnId,
                      name: `${btnName}(${apiType == 'BUTTON' ? '按钮' : '操作'})`,
                      code: btnCode,
                      apiId: apiId,
                      apiUrl: apiUrl,
                      guid: pid,
                      btnType: 'btn',
                    });
                  }
                }
                if (j.child) {
                  console.log('child====>', j.child);
                  j.child.forEach((l) => {
                    console.log('btnApiDate', l.btnApiDate);
                    if (l.btnApiDate) {
                      for (let m = 0; m < l.btnApiDate.length; l++) {
                        const { btnId, btnName, btnCode, apiId, apiUrl, apiType } = l.btnApiDate[m];
                        l.child.push({
                          id: btnId,
                          name: `${btnName}(${apiType == 'BUTTON' ? '按钮' : '操作'})`,
                          code: btnCode,
                          apiId: apiId,
                          apiUrl: apiUrl,
                          guid: pid,
                        });
                      }
                    }
                  });
                }
                // console.log('====>', j.child);
              });
            }
            // 在一级菜单下展示按钮操作数据处理
            if (i.btnApiDate) {
              for (let m = 0; m < i.btnApiDate.length; m++) {
                const { btnId, btnName, btnCode, apiId, apiUrl, apiType } = i.btnApiDate[m];
                if (btnId == 0) return;
                i.child.unshift({
                  id: btnId,
                  name: `${btnName}(${apiType == 'BUTTON' ? '按钮' : '操作'})`,
                  code: btnCode,
                  apiId: apiId,
                  apiUrl: apiUrl,
                  guid: i.id,
                });
                // console.log('i.child=>', i.child);
              }
            }
          });
        });
      } else {
        this.treeData = [];
      }
      this.checkedMenuIds = [];
    },

Answer 1

function change(data){
  for (let item of data) {
    if (item.btnApiDate) {
      item.btnApiDate.forEach(btn => {
        Object.assign(item, btn);
      });
      delete item.btnApiDate;
    }
    if (item.child && item.child.length) {
      change(item.child);
    }
  }
  return data;
}

不知道是不是你要的,btnApiDate是数组,如果有多个,全放到child里面,重复项目我覆盖了