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

2022-06-20 14:32:27 阅读：151 来源： 互联网

标签：vue title fatherId parentId pId 宝马 aid children

数组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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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