如何在<v-treeview> Vuetify中添加新节点

雏鸟开发者

我目前正在使用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.

Sumurai8

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.

编辑如何在<v-treeview> Vuetify中添加新节点

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在vuetify中为v-treeview添加右键单击事件以打开菜单?

Vuetify v-treeview不会删除节点

如何在TreeView中扩展新添加的节点

如何在vuetify中使用`v-treeview`仅显示目录?

Vuetify v-treeview 如何获取最后选择的元素?

如何强制#vuetify #treeview节点重新加载?

如何在v-dialog,vuetify中添加具有新样式CSS的类?

Treeview - 如何在 JSON 中默认检查节点?

我应该如何在Virtual TreeView中更新节点?

如何在Virtual TreeView中获得可见的根节点?

如何在WPF TreeView中显示JSON

Treeview - 如何动态添加子节点?

Material-UI:如何在 TreeView 中添加边框

如何在页面加载时为特定节点扩展Treeview

如何添加WPF treeView节点单击事件以获取节点值

如何在Telerik MVC TreeView(Kendo UI)上的TreeView中访问Model属性

剑道:如何在TreeView中创建递归层次结构?

QML:如何在TreeView内部的委托中获取QModelIndex

如何在Tkinter TreeView中设置行高?

如何在 QML 中更改 TreeView 的行选择颜色?

如何在QML的TreeView中自定义子项?

如何在Angular 7中创建延迟加载Treeview

如何在 Treeview 中实现 AutoSize Grid Layout

默认情况下如何在Treeview中设置Checkbox

如何在tkinter中的Treeview上禁用多选

如何在Treeview中编辑标题的样式(Python ttk)

Python GTK + 3:如何在TreeView中设置行

如何在Gtk#TreeView中管理特殊用途的按键?

如何在tkinter treeview中获取项目计数?