Vue 3组合式API中如何结合v-for实现数组值求和

我需要给表格的数值列计算总和，在tfoot的「Jumlah」行中显示每列的求和结果（例如得到4, 4, 4）。当前我的表格Vue代码如下：

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th scope="col">Kecamatan</th>
            <th scope="col">Desa</th>
            <th scope="col" v-for="(form, index) in formFields" :key="index">
                {{ form.title }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item, index) in datas" :key="index">
            <td>{{ item.kecamatan !== null ? item.kecamatan.name : '-' }}</td>
            <td>{{ item.desa !== null ? item.desa.name : '-' }}</td>
            <td v-for="(field, index) in JSON.parse(item.fieldDatas)" :key="index">
                {{ field.value }}
            </td>
            <td v-if="forms.length >= JSON.parse(item.fieldDatas).length"
                v-for="(n, i) in (forms.length - JSON.parse(item.fieldDatas).length)">0</td>
        </tr>
    </tbody>
    <tfoot>
        <tr v-for="(item, index) in datas" :key="index">
            <td colspan="2">Jumlah</td>
            <td v-for="(field, index) in JSON.parse(item.fieldDatas)" :key="index">
                {{ field }}
            </td>
        </tr>
    </tfoot>
</table>

解决方案 #

1. 添加计算属性计算列总和

在Vue组件的computed选项中新增计算属性，遍历所有数据行累加每列数值：

computed: {
    columnTotals() {
        const totalColumns = this.formFields.length;
        const totals = Array(totalColumns).fill(0);
        
        this.datas.forEach(item => {
            const fields = JSON.parse(item.fieldDatas);
            fields.forEach((field, idx) => {
                if (idx < totalColumns) {
                    totals[idx] += Number(field.value) || 0;
                }
            });
        });
        
        return totals;
    }
}

2. 修正表尾(tfoot)代码

原表尾错误遍历datas生成多行总和，改为渲染计算好的总和数组：

<tfoot>
    <tr>
        <td colspan="2">Jumlah</td>
        <td v-for="(total, index) in columnTotals" :key="index">
            {{ total }}
        </td>
    </tr>
</tfoot>

3. 关键说明

• 以formFields长度为总列数基准，保证表头、表体、表尾列数一致；
• Number(field.value) || 0处理非数值内容，避免求和出现NaN；
• 表体补0的列无需额外处理，初始总和已设为0，不影响结果。

内容的提问来源于stack exchange，提问作者ASHafizullah