Vue.js 使用按钮| Vuetify展开和折叠treeview

我对Vuetify treeview组件有一些问题。我的目标是：

当我选择某个treeview的元素并按下展开/折叠按钮时，我希望看到该元素的所有子元素，然后当我再次按下按钮时，我希望折叠所有选定的元素

这是我的密码：

<template>
  <v-container fluid>
    <v-btn justify-center @click="expandCollapse"> Expand or collapse </v-btn>
    <v-treeview
      class="ml-4"
      v-model="tree"
      :open="items"
      :items="items"
      activatable
      item-key="name"
    >
      <template slot="prepend" slot-scope="{ item }">
        <v-list-tile-avatar
          size="30"
          style="min-width: 40px;"
          tile
        >
          <img :src="imageType(item.type)" alt=""/>
        </v-list-tile-avatar>
      </template>
    </v-treeview>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    items: [
      {
        name: 'Factory A',
        type: 'board',
        children: [
          {
            name: 'Line 1',
            children: [{
              name: 'Machine ABC',
              type: 'machine'
            }],
            type: 'board'
          },
          {
            name: 'Line 2',
            children: [{
              name: 'Machine ABC 02',
              children: [{
                name: 'Part A',
                type: 'part'
              },
              {
                name: 'Part B',
                type: 'part'
              },
              {
                name: 'Part C',
                type: 'part'
              },
              {
                name: 'Part D',
                type: 'part'
              }
              ],
              type: 'machine'
            }],
            type: 'board'
          },
          {
            name: 'Line 3',
            children: [{
              name: 'Machine ABC 03',
              type: 'machine'
            }],
            type: 'board'
          },
          {
            name: 'Line 4',
            children: [{
              name: 'Machine ABC 04',
              type: 'machine'
            }],
            type: 'board'
          }
        ]
      }
    ]
  }),
  methods: {
    imageType (type) {
      switch (type) {
        case 'board':
          return require('@/assets/images/board.svg')
        case 'machine':
          return require('@/assets/images/machine.svg')
        case 'part':
          return require('@/assets/images/part.svg')
      }
    },
   // ADDED
   bfs: function (tree, key, collection) {
      if (!tree[key] || tree[key].length === 0) return
      for (var i = 0; i < tree[key].length; i++) {
        var child = tree[key][i]
        collection.push(child)
        this.bfs(child, key, collection)
      }
    },
    expandCollapse (item) {
      const childs = []
      const selectedIDs = []
      childs.push(item)
      this.bfs(item, 'children', childs)
      }
  }
}
</script>

---

使用

打开

和

活动

事件侦听器更新打开/关闭的项目

要获取活动项，请使用

update:active

事件。 要获取打开的项目，请使用

更新：open

事件

在

expandCollapse

上，使用

active

项和

open

项确定是打开还是关闭，然后更新

open

以反映更改。这一部分只是对项目进行迭代，并运行一个与

active

和

open

if (this.open.indexOf(selectedIDs[0]) === -1) {
  this.open = this.open.concat(childs.map(node => node.id))
  } else {
    this.open = this.open.filter((item) => !selectedIDs.includes(item))
    }