我有一堆樹狀結構的物件。但是目前這個結構對我不起作用，因為我需要使用v-teeview，所以我需要重新構造它....
我的樹結構目前是這樣的：
items: [
{
data: [
{ ... },
],
children: [],
},
{
data: [{ ... }],
children: [{...}, {...}]
}
]
和 II 需要重組類似的東西：
items: [
{
id: 76,
name: "ADIS ",
children: [],
},
{
id: 64,
name: "YSVERIS",
children: [
{
id: 85,
name: "MERCEDES",
children: [],
},
{
id: 83,
name: "YNGRIBEL",
children: [],
},
],
}
]
所以，我實作了一個遞回函式，這個函式是為了重組樹。
代碼沙盒中的代碼：
export default {
methods: {
createTree(items) {
items.forEach((element) => {
if (element.children.length === 0) {
this.datatree.push({
id: element.data[0].id,
name: element.data[0].name,
children: [],
});
} else {
this.datatree.push({
id: element.data[0].id,
name: element.data[0].name,
children: this.createTree(element.children),
});
}
});
console.log("root: ", this.datatree);
},
},
mounted() {
this.createTree(this.items);
},
}
所以我目前的問題是，當我構建新樹時，它的子樹未定義，我做錯了什么？
在我的示例代碼中，我使用 console.log() 來查看新樹
uj5u.com熱心網友回復：
createTree()不回傳任何內容，因此將回傳值分配給children只會使children具有undefined值。
一種解決方案是遞回呼叫輔助方法（例如，名為“ createNode”），該方法從每個陣列元素創建樹節點（而不是遞回呼叫createTree()）。從 回傳結果createTree()，并將回傳值賦給datatree：
function createTree(items) {
const createNode = ({ data, children }) => ({
...data[0],
children: children?.map(child => createNode(child))
})
return items.map(item => createNode(item))
}
// MyComponent.vue
export default {
mounted() {
this.datatree = createTree(this.items)
}
}
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/370600.html