其他分享
首页 > 其他分享> > vue根据pId(fatherId)和aId(id)将数据处理为树状结构

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