我目前正在使用Vuetify制作树状视图。树形视图使用以下结构:
items: [
{
id: 1,
name: 'Applications :',
children: [
{ id: 2, name: 'Calendar : app' },
{ id: 3, name: 'Chrome : app' },
{ id: 4, name: 'Webstorm : app' }
]
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [
{ id: 8, name: 'index : ts' },
{ id: 9, name: 'bootstrap : ts' }
]
}
]
},
{
id: 10,
name: 'material2 :',
children: [
{
id: 11,
name: 'src :',
children: [
{ id: 12, name: 'v-btn : ts' },
{ id: 13, name: 'v-card : ts' },
{ id: 14, name: 'v-window : ts' }
]
}
]
}
]
},
{
id: 15,
name: 'Downloads :',
children: [
{ id: 16, name: 'October : pdf' },
{ id: 17, name: 'November : pdf' },
{ id: 18, name: 'Tutorial : html' }
]
},
{
id: 19,
name: 'Videos :',
children: [
{
id: 20,
name: 'Tutorials :',
children: [
{ id: 21, name: 'Basic layouts : mp4' },
{ id: 22, name: 'Advanced techniques : mp4' },
{ id: 23, name: 'All about app : dir' }
]
},
{ id: 24, name: 'Intro : mov' },
{ id: 25, name: 'Conference introduction : avi' }
]
}
]
})
它看起来像这样:
我的问题是在此结构中添加一个新节点,例如,如果要在应用程序下添加一个子代,则代码可能如下所示:
this.items[0].children.push(newObject)
还是如果我想在src下添加?那么它可能看起来像这样:
this.items[1].children[0].children.push(newObject)
如果我想更深入一点,它可能看起来像这样:
this.items[0].children[0].children[0].children[0].children[0].children.push(newObject)
As you can see, the way I add a node varies and the code changes depending on the location and depth of where I want to add the node. That means there is no single code that will cater for all the locations. Also I can add and nest as many node as I can. example is google drive How should I go about this? I've run out of ideas and is looking for any suggestions that might help.
If you are adding nodes directly from the tree, the easiest way is by using scoped slots. For example, you can use the append
slot to add something to each item. Since the item is passed to the slot, you can pass it to a function that can easily add a child to that object.
<v-app>
<v-treeview :items="items">
<template slot="append" slot-scope="{ item }">
<v-btn @click="addChild(item);">Add child</v-btn>
</template>
</v-treeview>
</v-app>
addChild(item) {
if (!item.children) {
this.$set(item, "children", []);
}
const name = `${item.name} (${item.children.length})`;
const id = this.nextId++;
item.children.push({
id,
name
});
}
Otherwise just walk recursively through the tree until you find the item you want to add to.
findItem(id, items = null) {
if (!items) {
items = this.items;
}
return items.reduce((acc, item) => {
if (acc) {
return acc;
}
if (item.id === id) {
return item;
}
if (item.children) {
return this.findItem(id, item.children);
}
return acc;
}, null);
}
You can see an example in codesandbox.
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句