我有一堆樹結構中的物件。但目前這個結構對我來說不起作用，因為我需要使用v-teeview，所以我需要重新建構它......
我的樹狀結構目前是這樣的：
items: [
{
data: [
{ ... },
],
children: [],
},
{
data: [{ ... }],
children: [{...}, {...}]
}
]
我需要重組類似的東西：
items: [
{
id: 76,
name: "ADIS ",
children: [],
},
{
id: 64,
name: "YSVERIS",
children: [
{
id: 85,
name: "MERCEDES",
children: [],
},
{
id: 83,
name: "YNGRIBEL",
children: [],
},
],
}
]
所以，我實作了一個遞歸函數，這個函數是為了重構樹。
codesandbox 中的程式碼：
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() 來查看新樹
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) } }示範