共计 3636 个字符，预计需要花费 10 分钟才能阅读完成。
遇到合并表格和共计数值一起应用可能有以下问题，共计不准：
因为组件的共计性能把每一行的都计算在内了，没有思考共计的状况，
如何解决这个问题？
咱们须要自定义一个计算共计的办法，这里我间接把数据后果和计算方法写进去，以供前面借鉴：
数据结构：
"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 组件
解决后的成果：
正文完
