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; },