折叠或展开vuetify 2数据表中的组

nfs0ujit  于 2023-03-31  发布在  Vue.js
关注(0)|答案(3)|浏览(169)

我有一个表,其中显示了许多项,所有项都按字符串属性分组。默认情况下,这些组都是展开的。
https://vuetifyjs.com/en/components/data-tables/#grouped-rows
是否有任何方法可以折叠所有组或立即扩展它们?
即有一个折叠所有按钮以上的表。我有搜索,但找不到解决方案。
谢谢

ws51t4hk

ws51t4hk1#

最新的Vuetify确实在group.header插槽中传递isOpentoggle值。您可以自定义此插槽以跟踪每个group的$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()
        })
    }
  }

演示:https://codeply.com/p/ys4Df2OLiE

fkaflof6

fkaflof62#

Vuetify 2在v-data-table上有一个名为“openCache”的未记录的data属性,它是一个由用于对项目进行分组的group值键控的对象。如果在data table上添加一个ref,则可以通过将相应group的值设置为true/false来切换组的isOpen状态。默认情况下,它们都为true。

<v-data-table ref="table">...</v-data-table>
afterMyItemsHaveLoaded() {
   Object.keys(this.$refs.table.openCache).forEach(g => this.$refs.table.openCache[g] = false)
}
beq87vna

beq87vna3#

编码-er答案可能工作,但我不想跟踪每个组的$refs。最后,我添加了这个技巧

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,因此并不理想。

相关问题