乐趣区

关于前端:elemtnt-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 文件:

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

退出移动版