如何在<v-treeview>中添加新节点Vuetify [英] How to add a new node in <v-treeview> Vuetify

问题描述

我目前正在使用 Vuetify 制作树视图.树视图使用这种结构:

I'm currently making a tree view using Vuetify. The tree view uses this structure:

      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' }
      ]
    }
  ]
})

它看起来像这样:

我的问题是在这个结构中添加一个新节点，例如，如果我想在应用程序下添加一个子节点，那么代码可能如下所示:

My problem is in adding a new node to this structure, For example if I want to add a child under applications then the code would probably look like this:

this.items[0].children.push(newObject)

或者如果我想在src下添加?那么它可能看起来像这样:

Or if I want to add under src? then it might look like this:

this.items[1].children[0].children.push(newObject)

如果我想更深入，它可能看起来像这样:

If I want to go deeper then it might look like this:

this.items[0].children[0].children[0].children[0].children[0].children.push(newObject)

如您所见，我添加节点的方式各不相同，并且代码会根据要添加节点的位置和深度而变化.这意味着没有单一的代码可以满足所有位置的需求.我也可以添加和嵌套尽可能多的节点.示例是 google drive 我应该怎么做?我的想法已经用完了，正在寻找可能有帮助的任何建议.

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.

推荐答案

如果直接从树中添加节点，最简单的方法是使用作用域槽.例如，您可以使用 append 插槽向每个项目添加一些内容.由于项目被传递到插槽，您可以将它传递给一个函数，该函数可以轻松地向该对象添加子项.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！