在 vuetify 2 数据表中折叠或展开组 [英] Collapse or expand Groups in vuetify 2 data-table

问题描述

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

I have a table where I have a number of items shown all grouped by a string property. By default these groups are all expanded.

https://vuetifyjs.com/en/components/data-表/#grouped-rows

无论如何要折叠所有组或立即展开它们吗?

Is there anyway to collapse all the groups or expand them at once ?

即在表格上方有一个折叠所有按钮.我有搜索但找不到解决方案.

Ie have a collapse all button above the table. I have search but can't find a solution.

谢谢

推荐答案

Codeply-er 答案可能有效，但我不想跟踪每个组的 $refs.最后我添加了这个hack

Codeply-er answer may work but I didn't want to track $refs for each group. In the end I add this 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 所以不太理想.

This probably relies on an internal method openCache so not ideal.

这篇关于在 vuetify 2 数据表中折叠或展开组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！