2021/04/29 vue用computed实现table列求和

• 实现效果
  
• 代码

1.template
<template v-if="list.length != 0">
          <tr
             style="text-align: center"
             v-for="(listData, index) in list"
             :key="index"
           >
             <td>{{ listData.settle_date }}</td>
             <td>{{ listData.settle_type }}</td>
             <td>{{ listData.settle_id }}</td>
             <td>{{ listData.it_amount }}</td>
             <td>{{ listData.sign_amount }}</td>
             <td>{{ listData.service_fee }}</td>
           </tr>

          <!-- 合计 行 -->
           <tr>
             <td colspan="3">合计</td>
             <td>{{ sumJSAmount }}</td>
             <td>{{ sumQSAmount }}</td>
             <td>{{ sumQSFeeAmount }}</td>
           </tr>
    </template>

2.js
computed: {
    //结算金额合计
    sumJSAmount() {
      let sum = "";
      this.list.forEach((element) => {
        sum += element.it_amount;
      });
      return sum;
    },
    //签收金额合计
    sumQSAmount() {
      let sum = "";
      this.list.forEach((element) => {
        sum += element.sign_amount;
      });
      return sum;
    },
    //签收服务费合计
    sumQSFeeAmount() {
      let sum = "";
      this.list.forEach((element) => {
        sum += element.service_fee;
      });
      return sum;
    },
  },

–同理，其他的计算也能直接写在相应的函数中

---

• computed对table列操作记录
• 如果有格式问题，比如后端返回0，null，需要统一格式，要在页面上显示为‘- -’这种情况，也能用computed实现效果
  –代码

//1.template
<tr
    style="text-align: center"
      v-for="(listData, index) in settle_info"
      :key="index"
 >
      <td>{{ listData.settle_id }}</td>
      <td>{{ listData.it_amount }}</td>
      <!-- <td>{{ listData.deduct_pay_code }}</td> -->
      <!-- <td>{{ listData.deduct_prepay_amount }}</td> -->
      <td>{{ emptyShowOne }}</td>
      <td>{{ emptyShowTwo }}</td>
 </tr>
//2.js
//关联预付款金额
    emptyShowTwo() {
      switch (this.settle_info.deduct_prepay_amount) {
        case 0:
          return "--";
          break;
        case undefined:
          return "--";
          break;
      }
    },