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

Question

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

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

Answer 1

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

<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
  });
}

否则只需递归遍历树，直到找到要添加的项目。

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);
}

您可以在 codeandbox 中看到一个示例。