遇到合并表格和合计数值一起使用可能有以下问题，合计不准：
因为组件的合计功能把每一行的都计算在内了，没有考虑合计的情况，
如何解决这个问题？
我们需要自定义一个计算合计的方法，这里我直接把数据结果和计算方法写出来，以供后面借鉴：
数据结构：
"aftersalePay": [{
"id": 507,
"aftersaleId": 577,
"refundType": 2,
"goodsId": 571,
"goodsName": "CPA无忧通关班",
"goodsSpecName": "单科1考期-税法",
"receivableMoney": 100.00,
"receivedMoney": 0.01,
"lessonCount": 5,
"signCount": 1,
"spendedMoney": 0.00,
"deductionMoney": 0.00,
"refundMoney": 0.01,
"handleTime": "2020-12-14T03:05:53.000+00:00",
"inoutProjects": [{
"id": 7,
"orderInoutProjectId": "1111",
"orderInoutProjectName": "1111",
"aftersalePayId": 507,
"inoutProjectId": "49878935151",
"inoutProjectName": "456489661311",
"deductionMoney": -9.00,
"refundableMoney": 234.00,
"receivedMoney": 12.00,
"receivableMoney": 234.00,
"couponDiscount": 0.0,
"upClassDiscount": 0.0,
"changeClassDiscount": 0.0,
"deduction": 0.0
}, {
"id": 8,
"orderInoutProjectId": "1111",
"orderInoutProjectName": "1111",
"aftersalePayId": 507,
"inoutProjectId": "49878935151",
"inoutProjectName": "456489661311",
"deductionMoney": 80.00,
"refundableMoney": 234.00,
"receivedMoney": 12.00,
"receivableMoney": 234.00,
"couponDiscount": 0.0,
"upClassDiscount": 0.0,
"changeClassDiscount": 0.0,
"deduction": 0.0
}, {
"id": 9,
"orderInoutProjectId": "1111",
"orderInoutProjectName": "1111",
"aftersalePayId": 507,
"inoutProjectId": "49878935151",
"inoutProjectName": "456489661311",
"deductionMoney": 80.00,
"refundableMoney": 234.00,
"receivedMoney": 12.00,
"receivableMoney": 234.00,
"couponDiscount": 0.0,
"upClassDiscount": 0.0,
"changeClassDiscount": 0.0,
"deduction": 0.0
}, {
"id": 10,
"orderInoutProjectId": "12",
"orderInoutProjectName": "dsadf",
"aftersalePayId": 507,
"inoutProjectId": "49878935151",
"inoutProjectName": "456489661311",
"deductionMoney": 80.00,
"refundableMoney": 234.00,
"receivedMoney": 12.00,
"receivableMoney": 234.00,
"couponDiscount": 0.0,
"upClassDiscount": 0.0,
"changeClassDiscount": 0.0,
"deduction": 0.0
}, {
"id": 11,
"orderInoutProjectId": "12",
"orderInoutProjectName": "dsadf",
"aftersalePayId": 507,
"inoutProjectId": "49878935151",
"inoutProjectName": "456489661311",
"deductionMoney": 80.00,
"refundableMoney": 234.00,
"receivedMoney": 12.00,
"receivableMoney": 234.00,
"couponDiscount": 0.0,
"upClassDiscount": 0.0,
"changeClassDiscount": 0.0,
"deduction": 0.0
}]
},
}],
html文件：
<el-table
border
v-show="item.openStatus"
style="width:100%;margin-bottom:24px"
header-cell-class-name="normal-table-header"
:data="item.inoutProjects"
show-summary
:span-method="retenSpan"
>
<template v-for="item of aftersalePayColumns">
<el-table-column :key="item.label" :label="item.label" :prop="item.prop" :width="item.width" />
</template>
</el-table>
js文件：
aftersalePay:[],//根据数据结构赋值过来的。
aftersalePayColumns:[
{ label: "收支项目名称", prop: "orderInoutProjectName" },
{ label: "应收金额", prop: "receivableMoney",width:"80px" },
{ label: "已收金额", prop: "receivedMoney",width:"80px" },
{ label: "扣费项目", prop: "inoutProjectName" },
{ label: "扣费", prop: "deductionMoney",width:"80px" },
{ label: "核定可退金额", prop: "refundableMoney" ,width:"100px"},
],
这里是核心，计算合计的方法：具体的字段可以参考console出来
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
if (column.property !== 'inoutProjectName') {
const values = data.map((item, index) => {
console.log()
if (index <= data.length-2 && data[index+1].orderInoutProjectId === data[index].orderInoutProjectId && data[index+1][column.property] === data[index][column.property]) {
} else {
return Number(item[column.property])
}
});
console.log('666666666666666666666',values)
// console.log("value的值",column.property)
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
// sums[index] += ' 元';
// sums[index] += ' ';
} else {
sums[index] = 'N/A';
}
}
});
console.log("总和",sums)
return sums;
},
也可以参考element的table组件
解决后的效果：
