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

Z时代
2024-02-22
分类：IT

菜单树用的是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 = [];    },

回答：

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里面,重复项目我覆盖了

以上是 vue 这种菜单数据怎么处理？的全部内容，来源链接： utcz.com/p/933577.html