Vuetify / DataTable：更改“show-group-by”按钮的样式？

Question

我想在 vuetify 数据表中使用默认分组功能。
它工作正常，但我想更改分组的默认按钮样式并将其替换为图标。
那可能吗？如果我检查开发工具中的按钮，它只会显示<span>group</span>.
在文档中只找到了这个：https : //vuetifyjs.com/en/components/data-tables/#grouped-rows

编辑：现在我知道我想要什么。我正在寻找v-slot:header. 这是我上面提到的开始分组的按钮的生成位置。

Answer 1

您可以使用group.header插槽并为组标题提供您自己的模板，包括切换按钮，并使用toggle道具中的方法，例如：

<template v-slot:group.header="{ group, headers, toggle, isOpen }">
  <td :colspan="headers.length">
     <v-btn @click="toggle" x-small icon :ref="group">
         <v-icon v-if="isOpen">mdi-plus</v-icon>
         <v-icon v-else>mdi-minus</v-icon>
     </v-btn>
     <span class="mx-5 font-weight-bold">{{ group }}</span>
  </td>
</template>