Vuetify数据表插槽组.摘要

Question

我使用的是vuetify数据表，我使用groob-by-slot按类别或位置对我的项目进行分组，这很好。我现在要做的是为每组添加一个摘要行。

这是我当前用于分组并尝试摘要行的代码

<v-data-table
v-if="reportType === 'Category' || reportType === 'Location'"
:headers="headers"
:items="assets"
disable-pagination
disable-filtering
hide-default-footer
disable-sort
:group-by="`${reportType.toLowerCase()}Name`"
class="elevation-1">
<template v-slot:group="{ items }">
<tr>
<td class="text-xs-right" :colspan="fixGroupByHeaders()"><strong>{{ getGroupByName(items[0]) }}</strong></td>
</tr>
<tr v-for="(item) in items" :key="item.id">
<td v-for="(header, index) in headers" :key="index">
{{ (getTotalCost(item, header.value) || item[header.value]) }}
</td>
</tr>
</template>
<template v-slot:group.summary="{ items }">
<tr>
<th class="title">Totals</th>
</tr>
</template>
</v-data-table>

groupby正在工作，但摘要不起作用。。我想知道我做错了什么，以及如何使用vuetify数据表api上的growby.summary插槽将其修复到获得摘要行的位置。

编辑：我了解group.summary槽，如果报告头是静态的，我可以很容易地创建它，在这种情况下，它们不是静态的。

因此，我创建了一个CodeSandbox示例，希望它能向您展示我正在努力实现的目标，并且正如我所说，头数组是动态的。

另一件事是，我添加了一个名为columnsToTotal的数组，以显示如果头数组中存在哪些列，则需要添加合计。

Answer 1

不能同时使用组和group.summary插槽。

group.header和group.summary插槽只是一个"；子时隙"；组插槽。当您覆盖组槽时；子时隙"；根本不存在。

我不清楚你想达到什么目的，但也许这条建议对你有用。

如果要自定义。。。

1. 。。。您的组标头，请使用group.header插槽
2. 。。。您的组行，使用项目插槽
3. 。。。您的组页脚，请使用group.summary槽
4. 。。。整个组，使用组插槽

Answer 2

这就是我获取摘要行所做的操作。itemTotal是一个方法。

<template v-slot:group.summary="{ items }">
<th colspan="7"></th>
<th>
<span class="ml-10">
Charge Total: {{ itemTotal(items) }}
</span>
</th>
</template>