vue根据pId（fatherId）和aId（id）将数据处理为树状结构

数组list

[
    {
        "pId": "0",
        "title": "然后为买宝马还是路虎又争了，然后又请双方家长竞拍，再然后……[笑而不语]",
        "aid": "4782405484810496",
        "children": []
    },
    {
        "pId": "4782405484810496",
        "title": "宝马，路虎，僵持不下，继续出价，谁出的高，谁说了算！[笑而不语]",
        "aid": "4782405598056320",
        "children": []
    },
    {
        "pId": "4782405598056320",
        "title": "奔驰奔驰我爱奔驰\n我要成为尊贵的梅赛德斯车主\n当然再有辆路虎揽胜就更好了\n希望爸爸妈妈再努努力么么哒 ​​​",
        "aid": "4782415765573427",
        "url": "http://weibo.com/7752891083/LyA0EnnTZ",
    },
    {
        "pId": "4782415765573427",
        "title": "【MINI将推出-全新SUV】近日，英国媒体AutoCar报道，MINI将推出全新一代Countryman车型，新车有望采用宝马为之提供的四驱系统，并且与宝马X1#今天周几#基于相同的UKL前驱平台完成制造。与此同时，新车也有望于今年四月正式亮相。 ​​",
        "aid": "4782428230520686",
        "children": []
    },
    {
        "pId": "4782428230520686",
        "title": "梅赛德斯-奔驰推出 310 英里续航里程的电动半挂车",
        "aid": "23093504782436000334217",
        "children": []
    },
    {
        "pId": "0",
        "title": "宝马集团位于沈阳的第三座整车工厂—华晨宝马里达工厂即将开业！作为宝马集团在中国市场最大投资项目，里达工厂遵循BMW iFACTORY“精益、绿色、数字化”标准，树立未来汽车智造新标杆。6月23日，敬请期待！",
        "aid": "4782431041226739",
        "children": []
    },
    {
        "pId": "4782431041226739",
        "title": "2.0T暴力小钢炮！奔驰 AMG A45 现车 目前还是小幅加价的行情，并且车源还比较少，我这儿有台山灰/黑红内饰，选装方向盘操控单元按钮的，需要加1万[馋嘴][馋嘴]还有台 白外/黑红 准新车，去年9月上牌的，才开了5900公里，客户报价4×W就能开走[彩虹屁][彩虹屁]有需要的朋友 欢迎私信来秒，手快有[开学季][开学季]\n#奔驰# #amg# #性能车#",
        "aid": "4782434161263733",
        "children": []
    },
    {
        "pId": "4782434161263733",
        "title": "发布了头条文章：《宝马汽车金融(股份有限公司)客服还款售后热线号码2022已更新中》  宝马汽车金融(股份有限公司)客服还款售后热线号码2022已更新中 ​​",
        "aid": "4782436091692305",
        "children": []
    }
]

调用

let treeData = this.handleTree(
          list,
          "aid",
          "pId",
          "",
          ''
        );

方法

    handleTree(data, id, parentId, children, rootId) {
      id = id || 'id'
      parentId = parentId || 'parentId'
      children = children || 'children'
      rootId = rootId || 0
      // 对源数据深度克隆
      const cloneData = JSON.parse(JSON.stringify(data))
      // 循环所有项
      const treeData =  cloneData.filter(father => {
        let branchArr = cloneData.filter(child => {
          // 返回每一项的子级数组
          return father[id] == child[parentId]
        });
        branchArr.length > 0 ? father.children = branchArr : '';
        // 返回第一层
        return father[parentId] == rootId;
      });
      return treeData != '' ? treeData : data;
    },

标签：vue,title,fatherId,parentId,pId,宝马,aid,children
来源： https://www.cnblogs.com/myqinyh/p/16393088.html