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

Question

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

编辑：现在我知道我想要什么了。我正在寻找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

我可以通过使用v-data-table上的hide_default_header道具来替换v-data-tableheaders行中的默认排序图标和group按钮(它看起来只是一个span标记，里面有文本'group'(，然后使用header插槽来替换隐藏的headers行。v-数据表文档

<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>

Answer 3

对于使用Vuetify 2的人来说，以下是适用于我的代码

<template v-slot:header="{ props: { headers }, on } ">
<tr>
<th v-for="header in headers" :class="header.class" :width="header.width" >
{{header.text}}
<v-icon @click="on.group(header.value)"> {{ header.icon }} </v-icon>
</th>
</tr>
</template>