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

因为组件的共计性能把每一行的都计算在内了,没有思考共计的状况,
如何解决这个问题?
咱们须要自定义一个计算共计的办法,这里我间接把数据后果和计算方法写进去,以供前面借鉴:
数据结构:

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