2020-12-14elemtnt table表格合并 , 合计一起使用的问题

遇到合并表格和合计数值一起使用可能有以下问题,合计不准:



因为组件的合计功能把每一行的都计算在内了,没有考虑合计的情况,
如何解决这个问题?
我们需要自定义一个计算合计的方法,这里我直接把数据结果和计算方法写出来,以供后面借鉴:
数据结构:

"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文件:


              
  
            

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组件
解决后的效果:


你可能感兴趣的:(2020-12-14elemtnt table表格合并 , 合计一起使用的问题)