遇到合并表格和共计数值一起应用可能有以下问题,共计不准:
因为组件的共计性能把每一行的都计算在内了,没有思考共计的状况,
如何解决这个问题?
咱们须要自定义一个计算共计的办法,这里我间接把数据后果和计算方法写进去,以供前面借鉴:
数据结构:
"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组件
解决后的成果: