当前位置: 首页 > Web前端 > HTML5

elemtnttable表合并,总使用问题

时间:2023-04-05 14:21:55 HTML5

合并表与合计值一起使用时,可能会出现以下问题。不允许合计:因为组件的合计函数是统计每一行的,所以不考虑合计。如何解决这个问题呢?我们需要自定义一个计算方法。这里我直接写数据结果和计算方法供后面参考:数据结构:"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,“receivedMoney”:234.00,“couponDiscount”:0.0,“上级折扣t":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文件:jsfile:aftersalePay:[],//根据数据结构赋值。aftersalePayColumns:[{label:"收支项目名称",prop:"orderInoutProjectName"},{label:"应收金额",prop:"receivableMoney",width:"80px"},{label:"收到金额",prop:"receivedMoney",width:"80px"},{label:"DeductionProject",prop:"inoutProjectName"},{label:"Deduction",prop:"deductionMoney",width:"80px"},{标签:"ApprovedRefundableAmount",prop:"refundableMoney",width:"100px"},],这里是核心,计算总金额的方法:具体字段请参考控制台getSummaries(param){const{列,数据}=参数;常量总和=[];columns.forEach((column,index)=>{if(index===0){sums[index]='总价';返回;}if(column.property!=='inoutProjectName'){constvalues=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{returnNumber(item[column.property])}});console.log('666666666666666666666',values)//console.log("value的值",column.property)if(!values.every(value=>isNaN(value))){sums[index]=values.reduce((prev,curr)=>{constvalue=Number(curr);if(!isNaN(value)){returnprev+curr;}else{returnprev;}},0);//sums[index]+='元';//求和[索引]+='';}埃尔se{sums[index]='N/A';}}});console.log("sum",sums)返回总和;},也可以参考element的table组件解析后的效果: