把从后台获取的平级数据转换成树状结构数据;

比如当后台返回如下的平级数据:

 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>

最终结果如下:

 

posted @ 2019-02-18 10:28  让心去旅行  Views(1347)  Comments(0Edit  收藏  举报