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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理