后端接口返回数据
逐级parentId为父级的id,parentId=0时 为tree第一级
先组装成自己想要的数据格式
const area = [...] //接口数据
const areaList = [];
area.forEach(({id,areaName,parentId}, index) => {
areaList.push({
id,
areaName,
parentId,
value: id,
text: areaName,
children: []
});
});
// 方法调用
handleListTree(areaList)
利用递归处理多层子集
function handleListTree(dataList){
const filterChildren = function(data){
let children = dataList.filter(item => item.parentId === data.id)
if(children.length > 0){
children.forEach(child=>{
child.children = filterChildren(child)
})
}
return children;
}
return dataList.filter(item=>{
if(item.parentId == 0){
item.children = filterChildren(item)
return true;
}
})
}
结果