如代码所示将一个数组对象按照某个字段分组,组装成antd Tree数据结构,此处按照fieldName字段分组,每组包含的内容为skillsName:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const data = [ // 原始数据{"skillsId": "001-01","skillsName": "生成技能1","fieldId": "1","fieldName": "网络故障",},{"skillsId": "001-02","skillsName": "生成技能2","fieldId": "1","fieldName": "网络故障",},{"skillsId": "001-03","skillsName": "生成技能3","fieldId": "1","fieldName": "网络故障",},{"skillsId": "002-01","skillsName": "研判技能1","fieldId": "1","fieldName": "网络故障",},{"skillsId": "002-02","skillsName": "研判技能2","fieldId": "1","fieldName": "网络故障",},{"skillsId": "003-01","skillsName": "故障定级技能1","fieldId": "1","fieldName": "网络故障",},{"skillsId": "007-01","skillsName": "受理技能1","fieldId": "2","fieldName": "网络投诉",},{"skillsId": "007-02","skillsName": "受理技能2","fieldId": "2","fieldName": "网络投诉",},{"skillsId": "007-03","skillsName": "受理技能3","fieldId": "2","fieldName": "网络投诉",},{"skillsId": "009-01","skillsName": "定界技能1","fieldId": "2","fieldName": "网络投诉",},{"skillsId": "009-02","skillsName": "定界技能2","fieldId": "2","fieldName": "网络投诉",},{"skillsId": "012-01","skillsName": "工单转派技能1","fieldId": "2","fieldName": "网络投诉",}];const transformData = (data) => {const map = {};data.forEach(item => {if (!map[item.fieldId]) {map[item.fieldId] = {key: item.fieldId,title: item.fieldName,children: []};}map[item.fieldId].children.push({key: item.skillsId,title: item.skillsName});});return Object.values(map);};const treeData = transformData(data);console.log(JSON.stringify(treeData, null, 2));</script>
</body></html>
代码通过遍历原始数据,使用一个对象 map 来按 fieldId 分组,并为每个组创建一个包含 key、title 和 children 属性的对象。然后,将每个技能的 skillsId 和 skillsName 添加到相应组的 children 数组中。最后,使用 Object.values() 方法将 map 对象转换为一个数组,得到所需的树结构数据。
输出结果为:
[{"key": "1","title": "网络故障","children": [{"key": "001-01","title": "生成技能1"},{"key": "001-02","title": "生成技能2"},{"key": "001-03","title": "生成技能3"},{"key": "002-01","title": "研判技能1"},{"key": "002-02","title": "研判技能2"},{"key": "003-01","title": "故障定级技能1"}]},{"key": "2","title": "网络投诉","children": [{"key": "007-01","title": "受理技能1"},{"key": "007-02","title": "受理技能2"},{"key": "007-03","title": "受理技能3"},{"key": "009-01","title": "定界技能1"},{"key": "009-02","title": "定界技能2"},{"key": "012-01","title": "工单转派技能1"}]}
]