需求:使用樹狀數據渲染樹,但后臺提供的是數組數據
~~~
const source = [
{ id: 1, parentId: 0, name: "1" },
{ id: 2, parentId: 0, name: "2" },
{ id: 3, parentId: 0, name: "3" },
{ id: 4, parentId: 1, name: "1-1" },
{ id: 5, parentId: 1, name: "1-2" },
{ id: 6, parentId: 2, name: "2-1" },
{ id: 7, parentId: 3, name: "3-1" }
]
const getTreeData = (source, mianId = 0) => {
const cloneData = JSON.parse(JSON.stringify(source)) //?對源數據深度克隆
return cloneData.filter(father => {
const branchArr = cloneData.filter(child => father.id === child.parentId)???// 返回每一項的子級數組
branchArr.length > 0 ? father.children = branchArr : '' // 如果存在子級,則給父級添加一個children屬性,并賦值
return father.parentId === mianId // 返回第一層
})
}
const arr = getTreeData(source)
console.error("arr", arr)
~~~