汇总数据表中的汇总行

问题描述

我有一个 sumField 方法可以对给定列中的值求和：

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

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

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

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

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

解决方法

得到了一个解决方案，希望能在未来对其他人有所帮助！

从创建一个新函数开始：

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')) }}

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