原始数据如下所示
[ { "name": "互联网", "label": "互联网", "value": "互联网", "children": [ { "name": "电商", "label": "电商", "value": "电商", "children": [ { "name": "天猫", "label": "天猫", "value": "天猫" }, { "name": "拼多多", "label": "拼多多", "value": "拼多多" }, { "name": "亚马逊", "label": "亚马逊", "value": "亚马逊" }, ] }, { "name": "汽车美容", "label": "汽车美容", "value": "汽车美容" }, { "name": "个人服务", "label": "个人服务", "value": "个人服务" }, { "name": "医疗卫生", "label": "医疗卫生", "value": "医疗卫生" } ] } ]
先需要给所有children里面的label加上父级label作为前缀【效果:互联网-电商-天猫】
实现代码如下
let respData:any[] = resp.data.content function recursionList(data, line='') { data.map((item:any) => { item.name = item.tag.name item.label = `${line ? line + '-' : ''}${item.tag.name}` item.value = `${line ? line + '-' : ''}${item.tag.name}` if(item.children && item.children instanceof Array && item.children.length){ let nameLine = `${line ? line + '-' : ''}${item.tag.name}` recursionList(item.children, nameLine) } }) } recursionList(respData)
处理后结果:
[ { "name": "互联网", "label": "互联网", "value": "互联网", "children": [ { "name": "电商", "label": "电商", "value": "电商", "children": [ { "name": "天猫", "label": "天猫", "value": "天猫", "otherLabel": "互联网-电商-天猫" }, { "name": "拼多多", "label": "拼多多", "value": "拼多多", "otherLabel": "互联网-电商-拼多多" }, { "name": "亚马逊", "label": "亚马逊", "value": "亚马逊", "otherLabel": "互联网-电商-亚马逊" } ], "otherLabel": "互联网-电商" }, { "name": "汽车美容", "label": "汽车美容", "value": "汽车美容", "otherLabel": "互联网-汽车美容" }, { "name": "个人服务", "label": "个人服务", "value": "个人服务", "otherLabel": "互联网-个人服务" }, { "name": "医疗卫生", "label": "医疗卫生", "value": "医疗卫生", "otherLabel": "互联网-医疗卫生" } ], "otherLabel": "互联网" } ]