如何使用插槽在 Vuetify 数据表中设置分组行的样式？

Question

有没有人v-slot在最新的 Vuetify 版本中实现了分组行？他们的例子是这样的：

<template>

  <v-data-table

    :headers="headers"

    :items="desserts"

    item-key="name"

    group-by="category"

    class="elevation-1"

    show-group-by

  ></v-data-table>

</template>

<script>

  export default {

    data () {

      return {

        headers: [

          {

            text: 'Dessert (100g serving)',

            align: 'left',

            value: 'name',

          },

          { text: 'Category', value: 'category' },

        ],

        desserts: [

          {

            name: 'Frozen Yogurt',

            category: 'Ice cream',

          },

          {

            name: 'Ice cream sandwich',

            category: 'Ice cream',

          },

          {

            name: 'Eclair',

            category: 'Cookie',

          },

          {

            name: 'Cupcake',

            category: 'Pastry',

          },

          {

            name: 'Gingerbread',

            category: 'Cookie',

          },

          {

            name: 'Jelly bean',

            category: 'Candy',

          },

          {

            name: 'Lollipop',

            category: 'Candy',

          },

          {

            name: 'Honeycomb',

            category: 'Toffee',

          },

          {

            name: 'Donut',

            category: 'Pastry',

          },

          {

            name: 'KitKat',

            category: 'Candy',

          },

        ],

      }

    },

  }

</script>

这有效，但我想推出我自己的风格。我试过这样的事情：

<template v-slot:group="data">

   {{data}}

</template>

我看到了对象，但缺少样式。据我所知，它在文档中丢失了。

如果有人已经实现了这样的东西，将不胜感激。

Answer 1

是的，您可以通过从项目道具或硬编码动态添加类来在组中拥有自己的风格使用 Vuetify 2.x 更新了 codepen：https ://codepen.io/chansv/pen/wvvzXRj?editors = 1010<div id="app">&nbsp; <v-app id="inspire">&nbsp; &nbsp; <v-data-table&nbsp; &nbsp; &nbsp; :headers="headers"&nbsp; &nbsp; &nbsp; :items="desserts"&nbsp; &nbsp; &nbsp; item-key="name"&nbsp; &nbsp; &nbsp; group-by="category"&nbsp; &nbsp; &nbsp; class="elevation-1"&nbsp; &nbsp; &nbsp; show-group-by&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <template v-slot:group="props">&nbsp; &nbsp;<span class="font-weight-bold">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{{props.group }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; <v-data-table&nbsp; &nbsp; &nbsp; :headers="props.headers"&nbsp; &nbsp; &nbsp; :items="props.items"&nbsp; &nbsp; &nbsp; item-key="name"&nbsp; &nbsp; &nbsp; hide-default-footer&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <template v-slot:body="{ items }">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr v-for="item in items" :key="item.name" class="success">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{{ item.name }}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; &nbsp; </v-data-table></template>&nbsp; &nbsp;</v-data-table>&nbsp; </v-app></div>new Vue({&nbsp; el: '#app',&nbsp; vuetify: new Vuetify(),&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; headers: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Dessert (100g serving)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align: 'left',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: 'name',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; { text: 'Category', value: 'category' },&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; desserts: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Frozen Yogurt',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Ice cream',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Ice cream sandwich',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Ice cream',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Eclair',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Cookie',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Cupcake',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Pastry',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Gingerbread',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Cookie',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Jelly bean',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Candy',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Lollipop',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Candy',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Honeycomb',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Toffee',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'Donut',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Pastry',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'KitKat',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: 'Candy',&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; }&nbsp; },})