Блог

Как свернуть treeview с помощью кнопки?

Я пробовал это:

 <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 prop.

Вы можете добавить ссылку в treeview и использовать updateAll(boolean) функцию компонента v-treeview.

 <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>
  

Вот пример демонстрации в codesandbox:

Я, наконец, исправил свою проблему, как показано ниже, открыв только первую глубину.

Сначала я изменил кнопку в <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>
  

Наконец, я использую этот метод для переключения treeview (другими словами, заполнения или опустошения open массива):

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