如何在 Vuetify 中使用按钮折叠 v-treeview？

Question

如何使用按钮折叠树视图？

我试过这个：

<v-btn @click="expanded ? (expanded = false) : (expanded = true)"
    ><v-icon>{{
        expanded ? 'mdi-arrow-collapse-all' : 'mdi-arrow-expand-all'
    }}</v-icon></v-btn
>

<v-treeview
    :items="branches"
    :open-all="expanded"
/>

<script>
export default {
    data() {
        return {
            expanded: true,
            branches: [...],
        }
    }
}
</script>

但我无法使 open-all 道具正常工作。

Answer 1

您可以添加 v-treeview 组件的 ref to the treeview, and use the updateAll(boolean) function。

<v-treeview
  :items="branches"
  :open-all="expanded"
  ref="myTreeview"
/>

<v-btn @click="toggleTreeview">
  <v-icon>{{ expanded ? 'mdi-arrow-collapse-all' : 'mdi-arrow-expand-all'}}</v-icon>
</v-btn>

<script>
export default {
  data() {
    return {
      expanded: true,
      branches: [...],
    }
  },
  methods: {
    toggleTreeview() {
      this.expanded = !this.expanded;
      this.$refs.mytreeview.updateAll(this.expanded); 
    },
  }
}
</script>

这是一个示例 demo at codesandbox：

Answer 2

我终于解决了我的问题，如下所示，只打开 第一个深度。

首先，我将 <template> 中的按钮更改为：

<v-btn @click="toggleTreeview()"
    ><v-icon>{{
        open.length
            ? 'mdi-arrow-collapse-all'
            : 'mdi-arrow-expand-all'
    }}</v-icon>
</v-btn>

然后，我将这些道具用于 <v-treeview>:

<v-treeview
    :items="branches"
    item-key="id"
    :open.sync="open"
/>

我删除了 expanded 并添加了 open 数组：

<script>
export default {
    data() {
        return {
            branches: [...],
            open: []
        }
    }
}
</script>

最后，我使用此方法切换树视图（换句话说，填充或清空 open 数组）：

methods: {
    toggleTreeview() {
        this.open.length
            ? (this.open = [])
            : this.branches.forEach((element) => this.open.push(element.id))
    },
}

如何在 Vuetify 中使用按钮折叠 v-treeview？

How to collapse a v-treeview with a button in Vuetify?

treeview

vuetify.js