Vue.js Vuetify/DataTable：更改'；按'显示分组；按钮

我想在vuetify数据表中使用默认分组函数。
它工作正常，但我想更改分组的默认按钮样式，并将其替换为图标。
可能吗？如果我检查dev工具中的按钮，它只会显示

group

在文档中仅找到此项：

---

编辑：现在我知道我想要什么了。我正在寻找

v-slot:header

的默认模板。这就是我上面提到的开始分组的按钮生成的地方。

您可以使用

组标题

槽，为组标题提供您自己的模板，包括切换按钮，并使用道具中的

切换

方法，如：

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

mdi plus
减mdi
{{group}}

您可以使用

组标题

槽，为组标题提供您自己的模板，包括切换按钮，并使用道具中的

切换

方法，如：

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

mdi plus
减mdi
{{group}}

我可以使用

v-data-table

上的

hide\u default\u header

道具替换v-data-table headers行中的默认排序图标和组按钮（看起来只是一个span标签，里面有文本“group”），然后使用

header

槽替换隐藏的headers行

{{header.text}}
键盘箭头向下
把你翻过来

我可以使用

v-data-table

上的

hide\u default\u header

道具替换v-data-table headers行中的默认排序图标和组按钮（看起来只是一个span标签，里面有文本“group”），然后使用

header

槽替换隐藏的headers行

{{header.text}}
键盘箭头向下
把你翻过来

您可以使用

自定义表格标题中的html内容。哦，谢谢，我从没想过这一点：D是否有办法查看vuetify的默认组件，该组件正在处理标头？因此，我可以复制粘贴默认值，只需更改“分组依据”按钮？是的，您可以尝试使用

v-slot:group

，并且可以在文档中查看更多具体的详细信息。我发现了一个类似的问题-抱歉，我不明白您的意思，您是指默认模板槽还是无槽？如果未传入文档中指定的

v-slot

，则模板可能会被过滤而不呈现。您可以使用

自定义表格标题中的html内容。谢谢，我从未想过这一点：D是否有办法查看vuetify的默认组件，该组件正在处理标头？因此，我可以复制粘贴默认值，只需更改“分组依据”按钮？是的，您可以尝试使用

v-slot:group

，并且可以在文档中查看更多具体的详细信息。我发现了一个类似的问题-抱歉，我不明白您的意思，您是指默认模板槽还是无槽？如果未传入文档中指定的

v-slot

，则模板可能会被过滤而不会呈现。感谢您提供此示例。：）与此同时，我也得到了类似的结果。但我更喜欢你的，我会坚持下去。现在我知道我想要什么了。我正在寻找

v-slot:header

的模板。这是生成启动grouping.YW mate的按钮的地方。我不完全理解你想用

标题
插槽做什么，但是如果你能再解释一下，我很乐意在需要时提供帮助。啊，是的，当然。如果激活vuetify datatable的
show group by
prop，它将在每个列标题上生成一个按钮以切换分组。按钮本身只是一个
组
，我想将此按钮更改为带有图标的真实按钮。我想我需要为此自定义孔标题模板，但我想保留其余部分，如果我知道默认标题模板的外观，我想我可以这样做。为此，在使用groupBy时，需要使用“标题”槽并隐藏默认标题。
show group by
的道具和方法已经是
标题
槽的一部分。我为你做了一支简单化的笔，它应该能帮助你完成这件事，以及其他任何事情。这是链接：这就是我要找的D非常感谢你。谢谢你举这个例子与此同时，我也得到了类似的结果。但我更喜欢你的，我会坚持下去。现在我知道我想要什么了。我正在寻找
v-slot:header
的模板。这是生成启动grouping.YW mate的按钮的地方。我不完全理解你想用
标题
插槽做什么，但是如果你能再解释一下，我很乐意在需要时提供帮助。啊，是的，当然。如果激活vuetify datatable的
show group by
prop，它将在每个列标题上生成一个按钮以切换分组。按钮本身只是一个
组
，我想将此按钮更改为带有图标的真实按钮。我想我需要为此自定义孔标题模板，但我想保留其余部分，如果我知道默认标题模板的外观，我想我可以这样做。为此，在使用groupBy时，需要使用“标题”槽并隐藏默认标题。
show group by
的道具和方法已经是
标题
槽的一部分。我为你做了一支简单化的笔，它应该能帮助你完成这件事，以及其他任何事情。这是链接：这就是我想要的