Vuetify / DataTable: Cambiare stile per il pulsante "mostra gruppo per"?

Question

Voglio usare la funzione di raggruppamento predefinita nel datatable di vuetify.
Funziona bene, ma voglio cambiare lo stile predefinito del pulsante per il raggruppamento e sostituirlo con un'icona.
È possibile? Se controllo il pulsante negli strumenti di sviluppo, viene visualizzato <span>group</span>.
Trovato solo questo nei documenti:https://vuetifyjs.com/en/components/data-tables/#grouped-rows

Modifica: Ormai so cosa vorrei. Sto cercando il modello predefinito per v-slot:header. Qui è dove viene generato il pulsante che ho menzionato sopra che avvia il raggruppamento.

Answer 1

Puoi utilizzare lo group.headerslot e fornire il tuo modello per l'intestazione del gruppo, incluso il pulsante di attivazione / disattivazione e utilizzare il togglemetodo degli oggetti di scena come:

<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

Sono stato in grado di sostituire l'icona di ordinamento predefinita e il pulsante di gruppo (che sembra essere un tag span con il testo 'group' all'interno) nella riga delle intestazioni della tabella v-data utilizzando il hide_default_headerpuntello su v-data-tablee quindi sostituendo il nascosto riga di intestazioni utilizzando lo headerslot. documenti 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>