如何在Vuetify中使用按钮折叠v树视图？

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

您可以将ref添加到树视图，并使用v-treeview组件的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))
    },
}