汇总数据中的汇总行 Table

Question

我有一个 sumField 方法可以计算给定列中的值：

sumField (key) {
    let total = 0
    const sum = this.tableName.reduce((acc, cur) => {
        return (total += +cur[key])
    }, 0)
    return sum
}

在我的数据 table 中，我调用 sumField 来生成数据特定列中值的滚动总计 table:

<template v-slot:[`body.append`]="{headers}">
    <tr class="summary">
        <td v-for="(header,i) in headers" :key="i">
          <div v-if="header.value == 'COL HEADER 1'">
          {{ sumField('COL HEADER 1') }}</div>
          <div v-else-if="header.value == 'COL HEADER 2'">
          {{ sumField('COL HEADER 2') }}</div>
        </td>
    </tr>
</template>

这在屏幕上显示为数据的附加行 table，并且值会根据应用于 table 的过滤器而变化。

有没有办法对计算出的值求和，并将其显示为滚动总值？

Answer 1

已找到解决方案，希望以后能对其他人有所帮助！

从创建新函数开始：

sumTot (col1, col2) {
    var one = col1
    var two = col2
    var tot = col1 + col2
    return tot
}

然后我调用 sumTot 给出了个人 sumField 调用的参数：

{{ sumTotal(sumField ('COL HEADER 1'), sumField ('COL HEADER 2')) }}

这给了我动态更新的运行总价值。

汇总数据中的汇总行 Table

Totaling a Summary Line in Data Table

sum

vuetify.js

v-data-table