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>

Answer 2

のhide_default_header小道具を使用しv-data-tableて非表示を置き換えることで、v-data-tableヘッダー行のデフォルトの並べ替えアイコンとグループボタン（スパンタグのように見え、テキスト「group」が含まれている）を置き換えることができました。headerスロットを使用してヘッダー行。v-data-tableドキュメント

<template v-slot:header="props">
    <thead>
        <tr>
            <template v-for="header in props.props.headers">
                <th :key="header.value">
                    <span>{{ header.text }}</span>
                    <v-btn @click.stop="props.on.sort(header.value)" icon><v-icon>keyboard_arrow_down</v-icon></v-btn>
                    <v-btn @click.stop="props.on.group(header.value)" icon><v-icon>flip_to_back</v-icon></v-btn>
                </th>
           </template>
        </tr>
    </thead>
</template>