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

Question

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

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

无论如何要折叠所有组或立即扩展它们？

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

谢谢

Answer 1

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