vue 递归处理tree结构

<el-tree 
   :data="treeMenuData" 
   ref="treeRef" 
   :props="defaultProps"
   highlight-current 
   node-key="id" 
   default-expand-all 
/>
  "result": [
	{
	   "tmSonTask": {
	       "id": "18a4f244224943cb98ad67bd48874edf",
	       "title": "NN"
	   },
	   "children": null,
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "1eae98fb55444640a68302975a1039c4",
	       "title": "AAA"
	   },
	   "children": [
	       {
	           "tmSonTask": {
	               "id": "6a441ba00ff045bfad017dbe23b9145f",
	               "title": "FFF"
	           },
	           "children": null,
	           "frontTaskId": null
	       },
	       {
	           "tmSonTask": {
	               "id": "84053cf7944f45cf9c706cdc8f12318b",
	               "title": "BBB"
	           },
	           "children": [
	               {
	                   "tmSonTask": {
	                       "id": "481c4f76ba2143fa835ce392e7d7779a",
	                       "title": "DDD"
	                   },
	                   "children": [
	                       {
	                           "tmSonTask": {
	                               "id": "83fa593ad0c24199937dd43ff22cba6c",
	                               "title": "EEE"
	                           },
	                           "children": [
	                               {
	                                   "tmSonTask": {
	                                       "id": "134cff35530740eab14dd65950e60997",
	                                       "title": "HHH"
	                                   },
	                                   "children": null,
	                                   "frontTaskId": null
	                               },
	                               {
	                                   "tmSonTask": {
	                                       "id": "42d52595922a4d67a935b11808449505",
	                                       "title": "FFF"
	                                   },
	                                   "children": null,
	                                   "frontTaskId": null
	                               },
	                               {
	                                   "tmSonTask": {
	                                       "id": "80d68cffca6442008ff0fd5d7edf9329",
	                                       "title": "JJJ"
	                                   },
	                                   "children": null,
	                                   "frontTaskId": null
	                               }
	                           ],
	                           "frontTaskId": null
	                       }
	                   ],
	                   "frontTaskId": null
	               }
	           ],
	           "frontTaskId": null
	       }
	   ],
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "24f7bfe1c7a342f0853f31d92526df22",
	       "title": "BB"
	   },
	   "children": null,
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "45250b323a1b4ebd8249c4abeffa9c24",
	       "title": "GGG"
	   },
	   "children": null,
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "8a3c52591af543b0a3b5e3a16e00962e",
	       "title": "WSX"
	   },
	   "children": null,
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "96e0720dd4b84392a5f0d6e40a6bf8c1",
	       "title": "nnnnn"
	   },
	   "children": null,
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "ac3d22ba8163418985d44589c083be67",
	       "title": "NNNN"
	   },
	   "children": null,
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "b9633ed47ca743d78ec5c848da5acbf3",
	       "title": "VV"
	   },
	   "children": null,
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "ba7e280eb7094624882b3d22da0e2920",
	       "title": "BBB"
	   },
	   "children": null,
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "3abbbd18c9c8407da4bf3f0c3a6b9f42",
	       "title": "AAA "
	   },
	   "children": [
	       {
	           "tmSonTask": {
	               "id": "976b39f2ad394c86948f5f6688ef6aff",
	               "title": "BB"
	           },
	           "children": [
	               {
	                   "tmSonTask": {
	                       "id": "1cf0c2395c2a42dab7b1b89433838a98",
	                       "title": "CC"
	                   },
	                   "children": null,
	                   "frontTaskId": null
	               },
	               {
	                   "tmSonTask": {
	                       "id": "286472f7be7a4cd49dd1e160561921af",
	                       "title": "CC"
	                   },
	                   "children": null,
	                   "frontTaskId": null
	               },
	               {
	                   "tmSonTask": {
	                       "id": "4a77adcf75094188a5e5826a98073a0d",
	                       "title": "CC"
	                   },
	                   "children": null,
	                   "frontTaskId": null
	               },
	               {
	                   "tmSonTask": {
	                       "id": "72f806b4deeb429dae606486ca5a59d6",
	                       "title": "CC"
	                   },
	                   "children": null,
	                   "frontTaskId": null
	               },
	               {
	                   "tmSonTask": {
	                       "id": "83deca5fd351422aa20bfdae5824b779",
	                       "title": "CC"
	                   },
	                   "children": null,
	                   "frontTaskId": null
	               },
	               {
	                   "tmSonTask": {
	                       "id": "9c697e3b6f8942bc9267c091ff9fff96",
	                       "title": "CC"
	                   },
	                   "children": null,
	                   "frontTaskId": null
	               },
	               {
	                   "tmSonTask": {
	                       "id": "a4d5b018cf484b65b46ff62c885c8eca",
	                       "title": "CC"
	                   },
	                   "children": null,
	                   "frontTaskId": null
	               },
	               {
	                   "tmSonTask": {
	                       "id": "c9e554684c8e4755aede3c80a04b464e",
	                       "title": "CC"
	                   },
	                   "children": null,
	                   "frontTaskId": null
	               }
	           ],
	           "frontTaskId": null
	       },
	       {
	           "tmSonTask": {
	               "id": "a3ed3753c528488689982f79710e3d94",
	               "title": "BB"
	           },
	           "children": [
	               {
	                   "tmSonTask": {
	                       "id": "10059728139b405e9d31694d184343c5",
	                       "title": "CC"
	                   },
	                   "children": [
	                       {
	                           "tmSonTask": {
	                               "id": "1bed67f3299d4f5a881b84559eb2b987",
	                               "title": "DD"
	                           },
	                           "children": null,
	                           "frontTaskId": null
	                       },
	                       {
	                           "tmSonTask": {
	                               "id": "afa03c4969be402db6c565908848fddc",
	                               "title": "FF"
	                               
	                           },
	                           "children": null,
	                           "frontTaskId": null
	                       },
	                       {
	                           "tmSonTask": {
	                               "id": "c6c290b8b40a462c84e3a147b8654b5e",
	                               "title": "EE"
	                           },
	                           "children": null,
	                           "frontTaskId": null
	                       }
	                   ],
	                   "frontTaskId": null
	               }
	           ],
	           "frontTaskId": null
	       }
	   ],
	   "frontTaskId": null
	},
	{
	   "tmSonTask": {
	       "id": "673405f6cc684e769a0c962f35bde6c3",
	       "title": "qaz"
	   },
	   "children": [
	       {
	           "tmSonTask": {
	               "id": "5c5cd12b585d48cf912d12e4fa9bb845",
	               "title": "XX"
	           },
	           "children": null,
	           "frontTaskId": null
	       }
	   ],
	   "frontTaskId": null
	}
],        
treeMenuData:[],
defaultProps: {
  children: "children",
  label: "title",
  isLeaf: "leaf"
},
methods:{
	/*
		使用递归处理下边数据格式
		[{
          children:[
            {
              children:[]
            }
          ]
        }]
	*/  
	formatRoutes(routerArr){
        const arr = []; 
        routerArr.forEach((item,key) => {       
          const tmp = { ...item };
            if (tmp.children) {
              tmp.children = this.formatRoutes(tmp.children);  
            }
          arr[key] = tmp.tmSonTask;
          arr[key].children=tmp.children; 
        })
        return arr;
      },
      /*
			需求: 如果children是null或者[] 就直接过滤掉这条数据 
			不显示到页面上
		*/
      changenode(data) {
        let children = Array.isArray(data.children) && data.children.length > 0
          if (children) {
              return {
                  ...data,
                  children: data.children.map(i => this.changenode(i)).filter(i => i)
              }
          } else {
              return null
          }
      }
}



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值