[ { "componentCount": 5, "categories": [ { "componentCount": 5, "elements": [ { "newName": "Generic - 200mm", "oldComponentKey": "M1697679454017_144344", "oldName": "Generic - 200mm", "newComponentKey": "M1697680099315_144344", "type": "attribute" }, { "newName": "Interior - 138mm Partition (1-hr)", "oldComponentKey": "M1697679454017_143858", "oldName": "Interior - 138mm Partition (1-hr)", "newComponentKey": "M1697680099315_143858", "type": "geometry" }, { "newName": "Generic - 200mm", "oldComponentKey": "M1697679454017_154279", "oldName": "Generic - 200mm", "newComponentKey": "M1697680099315_154279", "type": "both" }, { "newName": "Generic - 200mm", "oldComponentKey": "M1697679454017_150861", "oldName": "Generic - 200mm", "newComponentKey": "M1697680099315_150861", "type": "attribute" }, { "newName": "Generic - 200mm", "oldComponentKey": "M1697679454017_151331", "oldName": "Generic - 200mm", "newComponentKey": "M1697680099315_151331", "type": "attribute" } ],
"categoryName": "墙"
}
]
}
]
这个是我们将数据展示成这样
这是我们的数据结构
[{ "id": 0, "label": "全部", "children": [{ "label": "屋顶", "componentCount": 1, "componentKey": "", "id": 1, "children": [{ "label": "对比组", "id": 1, "children": [{ "label": "新Concrete Deck - Tapered Insulation", "id": "M1598257565598_1400561", "componentKey": "新M1598257565598_140056", "type": "new" }, { "label": "旧Concrete Deck - Tapered Insulation", "id": "M1608039229034_1400561", "componentKey": "新M1608039229034_140056", "type": "old" }]
}]
}, {
"label": "模型组",
"componentCount": 2,
"componentKey": "",
"id": 2,
"children": [{
"label": "对比组",
"id": 2,
"children": [{
"label": "新Array Group 1",
"id": "M1598257565598_1328311",
"componentKey": "新M1598257565598_132831",
"type": "new"
}, {
"label": "旧Array Group 1",
"id": "M1608039229034_1328311",
"componentKey": "新M1608039229034_132831",
"type": "old"
}]
},
{
"label": "对比组2",
"id": 3,
"children": [{
"label": "新Array Group 1",
"id": "M1598257565598_1328311",
"componentKey": "新M1598257565598_132831",
"type": "new"
}, {
"label": "旧Array Group 1",
"id": "M1608039229034_1328311",
"componentKey": "新M1608039229034_132831",
"type": "old"
}]
}
]
}]
}]
componentList.changDataList = [{
id: 0,
label: "全部",
children: [...changeDataChenged(res.data.data.changed.categories)]
}]
const changeDataChenged = (data: any) => {
return data.map((item: any, index: number) => {
return {
label: item.categoryName ,
componentCount: item.componentCount ? item.componentCount : 1,
componentKey: item.componentKey ? item.componentKey : '',
id: item.componentKey ? item.componentKey : index + 1,
children: item.elements.length>0 ? item.elements.map((el:any,ind:any)=>{
return {
label: '对比组'+(ind+1),
id: item.componentKey ? item.componentKey : index + 1,
children: [
{
label: '新' +el.newName,
id: el.newComponentKey + 1,
componentKey: '新' + el.newComponentKey,
type: "new"
},
{
label: '旧' + el.oldName,
id: el.oldComponentKey + 1,
componentKey: '旧' + el.oldComponentKey,
type: "old"
}
]
}
}) : []
}
})
}