把从后台获取的平级数据转换成树状结构数据;
比如当后台返回如下的平级数据:
data(){ return { processedData:[ {COMCODE:'CLUB00000000',COMNAME:'会员俱乐部',GRADE:'01',PARENTCOMCODE:'0000'}, {COMCODE:'AH066340000',COMNAME:'安徽公司',GRADE:'02',PARENTCOMCODE:'CLUB00000000'}, {COMCODE:'AH066340001',COMNAME:'宿州恒大名都',GRADE:'03',PARENTCOMCODE:'AH066340000'}, {COMCODE:'AH066340002',COMNAME:'合肥恒大水晶国际广场',GRADE:'03',PARENTCOMCODE:'AH066340000'}, {COMCODE:'AH066340003',COMNAME:'六安恒大御景湾',GRADE:'03',PARENTCOMCODE:'AH066340000'}, {COMCODE:'BJ066110000',COMNAME:'北京公司',GRADE:'02',PARENTCOMCODE:'CLUB00000000'}, {COMCODE:'BJ066110001',COMNAME:'邯郸恒大绿洲',GRADE:'03',PARENTCOMCODE:'BJ066110000'}, {COMCODE:'BJ066110002',COMNAME:'邯郸恒大翡翠华庭',GRADE:'03',PARENTCOMCODE:'BJ066110000'}, {COMCODE:'BJ066110003',COMNAME:'唐山恒大学庭',GRADE:'03',PARENTCOMCODE:'BJ066110000'} ] } }
而我们需要得到的数据效果如下树状结构数据:
processedData:[ { COMCODE:'CLUB00000000', COMNAME:'会员俱乐部', GRADE:'01', PARENTCOMCODE:'0000', children:[ { COMCODE:'AH066340000', COMNAME:'安徽公司', GRADE:'02', PARENTCOMCODE:'CLUB00000000', children:[ {COMCODE:'AH066340001',COMNAME:'宿州恒大名都',GRADE:'03',PARENTCOMCODE:'AH066340000'}, {COMCODE:'AH066340002',COMNAME:'合肥恒大水晶国际广场',GRADE:'03',PARENTCOMCODE:'AH066340000'}, {COMCODE:'AH066340003',COMNAME:'六安恒大御景湾',GRADE:'03',PARENTCOMCODE:'AH066340000'} ] }, { COMCODE:'BJ066110000', COMNAME:'北京公司', GRADE:'02', PARENTCOMCODE:'CLUB00000000', children:[ {COMCODE:'BJ066110001',COMNAME:'邯郸恒大绿洲',GRADE:'03',PARENTCOMCODE:'BJ066110000'}, {COMCODE:'BJ066110002',COMNAME:'邯郸恒大翡翠华庭',GRADE:'03',PARENTCOMCODE:'BJ066110000'}, {COMCODE:'BJ066110003',COMNAME:'唐山恒大学庭',GRADE:'03',PARENTCOMCODE:'BJ066110000'} ] } ] }
那么如何优雅的实现这种效果呢,实现代码如下:
<template> <input type="text"> </template> <script> export default { data(){ return { processedData:[ {COMCODE:'CLUB00000000',COMNAME:'会员俱乐部',GRADE:'01',PARENTCOMCODE:'0000'}, {COMCODE:'AH066340000',COMNAME:'安徽公司',GRADE:'02',PARENTCOMCODE:'CLUB00000000'}, {COMCODE:'AH066340001',COMNAME:'宿州恒大名都',GRADE:'03',PARENTCOMCODE:'AH066340000'}, {COMCODE:'AH066340002',COMNAME:'合肥恒大水晶国际广场',GRADE:'03',PARENTCOMCODE:'AH066340000'}, {COMCODE:'AH066340003',COMNAME:'六安恒大御景湾',GRADE:'03',PARENTCOMCODE:'AH066340000'}, {COMCODE:'BJ066110000',COMNAME:'北京公司',GRADE:'02',PARENTCOMCODE:'CLUB00000000'}, {COMCODE:'BJ066110001',COMNAME:'邯郸恒大绿洲',GRADE:'03',PARENTCOMCODE:'BJ066110000'}, {COMCODE:'BJ066110002',COMNAME:'邯郸恒大翡翠华庭',GRADE:'03',PARENTCOMCODE:'BJ066110000'}, {COMCODE:'BJ066110003',COMNAME:'唐山恒大学庭',GRADE:'03',PARENTCOMCODE:'BJ066110000'} ] } }, mounted(){ this.processedData = this.fatherDataTree(this.processedData); console.log(this.processedData); }, methods:{ compare(property){ return function(a,b){ var value1 = a[property]; var value2 = b[property]; return value1 - value2; } }, fatherDataTree(processedData){ var dataArr = []; // 按照级别大小排序,确保排在第一个的是最高级别; processedData =processedData.sort(this.compare('GRADE')); processedData.forEach((jsonItem) => { var GRADE = jsonItem.GRADE; if(GRADE == processedData[0].GRADE){ dataArr.push(jsonItem); } }); return this.childrenDataTree(processedData,dataArr); }, childrenDataTree(processedData,dataArr){ for(var i = 0; i < dataArr.length; i++){ var dataArrItem = dataArr[i]; var childrenArray = []; var curDataArrItem = dataArrItem.COMCODE; for(var j = 0; j < processedData.length; j++){ var curProcessedDataItem = processedData[j]; var curParentDataArrItem = curProcessedDataItem.PARENTCOMCODE; if(curDataArrItem == curParentDataArrItem){ // 判断是否为儿子节点 childrenArray.push(curProcessedDataItem); } }; dataArrItem.children = childrenArray; if(childrenArray.length > 0){ // 有儿子节点则递归 this.childrenDataTree(processedData,childrenArray); } }; return dataArr; } } } </script>
最终结果如下: