Vue.js 在vuetify 2数据表中折叠或展开组

我有一个表，其中显示了许多项，所有项都按字符串属性分组。 默认情况下，这些组都将展开

是否有方法将所有组折叠或立即扩展

桌子上方有一个折叠按钮。我进行了搜索，但找不到解决方案

---

谢谢

最新的Vuetify确实传递了

组头

插槽中的

isOpen

和

toggle

值。您可以自定义此插槽以跟踪每个

组的$refs，然后将其绑定到一个toggle all（或expand/collapse all）函数

  <template v-slot:group.header="{ group, headers, toggle, isOpen }">
        <td :colspan="headers.length">
            <v-btn @click="toggle" small icon :ref="group">
                <v-icon v-if="isOpen">mdi-chevron-up</v-icon>
                <v-icon v-else>mdi-chevron-down</v-icon>
            </v-btn>
            {{ group }}
        </td>
  </template>

  methods: {
    toggleAll () {
        Object.keys(this.$refs).forEach(k => {
            this.$refs[k].$el.click()
        })
    }
  }


mdi V形向上
mdi V形向下
{{group}}
方法：{
托格里尔（）{
Object.keys（this.$refs）.forEach（k=>{
此.$refs[k].$el.click（）
})
}
}

演示：
编码者的答案可能有效，但我不想跟踪每组$ref。最后我添加了这个hack

private expandAll() {
    const self = this;

    for (const name of Object.keys(self.$refs.expandableTable.openCache)) {
        self.$refs.expandableTable.openCache[name] = true;
    }
}

private collapseAll() {
    const self = this;

    for (const name of Object.keys(self.$refs.expandableTable.openCache)) {
        self.$refs.expandableTable.openCache[name] = false;
    }
}

这可能依赖于内部方法openCache，因此不太理想。
我刚刚找到了一个示例，但它使用了vuetify分支，这使我认为这是不可能的。我的代码中去掉了复杂性，这几乎就是vuetify在ie组中的例子