我有一个表,其中显示了许多项,所有项都按字符串属性分组。默认情况下,这些组都是展开的。https://vuetifyjs.com/en/components/data-tables/#grouped-rows是否有任何方法可以折叠所有组或立即扩展它们?即有一个折叠所有按钮以上的表。我有搜索,但找不到解决方案。谢谢
ws51t4hk1#
最新的Vuetify确实在group.header插槽中传递isOpen和toggle值。您可以自定义此插槽以跟踪每个group的$refs,然后可以绑定到toggle all(或expand/collapse all)函数....
group.header
isOpen
toggle
group
<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
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) }
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,因此并不理想。
3条答案
按热度按时间ws51t4hk1#
最新的Vuetify确实在
group.header
插槽中传递isOpen
和toggle
值。您可以自定义此插槽以跟踪每个group
的$refs,然后可以绑定到toggle all(或expand/collapse all)函数....演示:https://codeply.com/p/ys4Df2OLiE
fkaflof62#
Vuetify 2在v-data-table上有一个名为“openCache”的未记录的data属性,它是一个由用于对项目进行分组的group值键控的对象。如果在data table上添加一个ref,则可以通过将相应group的值设置为true/false来切换组的isOpen状态。默认情况下,它们都为true。
beq87vna3#
编码-er答案可能工作,但我不想跟踪每个组的$refs。最后,我添加了这个技巧
这可能依赖于一个内部方法openCache,因此并不理想。