如何将总和行正确添加到 V-Data-Table 并保留排序？

Question

我正在尝试向组件添加一个总和行v-data-table并维护对组件的排序。我尝试了两种方法，但都不是最佳解决方案。

方法 1) 挂载好表并取完数据后，再将数据总和再推入表中。

像这样的东西：

let total = 0
this.data.forEach(d => {
  total += d.someValue
})

this.data.push({
  value: total
})

这在表上具有所需的结果，您可以使用条件类绑定来加粗最后一行。这种方法的问题是在排序时，总和行像任何其他行一样移动。这不是最优的。造型是完美的，正是我想要的，但排序把一切都搞砸了。

方法 2) 使用v-data-table具有一行（总和行）的另一个组件并将其添加到v-slot:footer父表中。

这种方法有几个问题。标题必须存在并且与父表完全相同（除了排序）。否则，求和行的间距是错误的（即它不在求和列的正下方）。

由于存在标题，因此在页脚和表格的其余部分之间存在明显的间隙。使用display: none;的页脚表头弄乱列间隔为好。我相信 Vuetify 通过列标题的宽度来确定列的宽度。隐藏它的方法似乎是使用opacity: 0;This 删除标题，但留下一个空白空间。

我尝试调整边距以使表格更接近它的父表格，但这会导致新问题。由于页脚表的页眉仍然存在，它与表的最后一行重叠并使底行无法使用。

这是这种方法的样子：

<v-data-table :items-per-page="-1" :headers="headers" :items="items">
  <template v-slot:footer>
    <v-data-table
      :headers="headers"
      hide-default-footer
      style="font-weight: bold;"
      :items="[sum]">
    </v-data-table>    
  </template>
</v-data-table>

任何人都有在保留排序的同时添加求和行的正确方法？

Answer 1

您需要使用 body.append 或 body.prepend 插槽。这将允许您传入表的标题并创建一个自定义行，该行将持续排序、过滤和分页。

<v-data-table :headers="headers" :items="items">

    <template v-slot:body.append="{headers}">
        <tr>
            <td v-for="(header,i) in headers" :key="i">

                <div v-if="header.value == 'field1'">
                    {{field1Total}}
                </div>

                <div v-if="header.value == 'field2'">
                    {{field2Total}}
                </div>

                <div v-else>
                    <!-- empty table cells for columns that don't need a sum -->
                </div>

            </td>
        </tr>
    </template>

</v-data-table>