Настроить сгруппированные строки в v-data-table

Question

Я использую v-data-table с сгруппированными строками: https://codepen.io/jangaraj/pen/zYqOwBj?editors=1010

Я хотел бы также показать количество элементов для каждой категории, например category: Candy (3 items in the group). Есть ли слот для такой настройки?

Answer 1

Вы можете настроить слот group.header ...

 <template v-slot:group.header="{ group, items, isOpen, toggle, remove }">
        <td colspan="2">
            <v-btn icon @click="toggle">
              <v-icon v-if="isOpen">
                mdi-minus
              </v-icon>
              <v-icon v-else>
                mdi-plus
              </v-icon>
            </v-btn>
            Category: {{ group }} {{ items.length }}
            <v-btn icon @click="remove">
              <v-icon>
                mdi-close
            </v-btn>
        </td>
 </template>

Codeply