计算并显示合计金额

src/views/repair/tickets/Components/TicketItemShow.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
+              :summary-method="getSummaries"
+              show-summary
     >
       <el-table-column label="序号" align="center">
         <template scope="scope">
@@ -22,12 +24,12 @@
           {{ scope.row[listType]?.code }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="数量" width="180" prop="itemCount"/>
       <el-table-column align="center" label="单位" width="180" prop="unit">
         <template slot-scope="scope">
           <dict-tag :type="DICT_TYPE.REPAIR_UNIT" v-model="scope.row[listType].unit"/>
         </template>
       </el-table-column>
+      <el-table-column align="center" label="数量" width="180" prop="itemCount"/>
       <el-table-column align="center" label="单价" width="180" prop="itemPrice"/>
       <el-table-column align="center" label="折扣" width="180" prop="itemDiscount">
         <template slot-scope="scope">
@@ -131,7 +133,9 @@ export default {
         itemCount: [{required: true, message: '数量不能为空', trigger: 'blur'}],
         itemDiscount: [{required: true, message: "折扣不能为空", trigger: 'blur'}]
       },
-      formLoading: false
+      formLoading: false,
+      // 需要计算的列
+      includeColumn: ['itemMoney', 'itemCount']
     }
   },
   computed: {
@@ -167,6 +171,29 @@ export default {
         this.$modal.msgSuccess("修改成功")
         this.$emit('success', this.item.ticketId)
       }catch{}
+    },
+    getSummaries(param){
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+        const values = data.map(item => Number(item[column.property]));
+        if (this.includeColumn.includes(column.property)) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          sums[index];
+        }
+      });
+      return sums;
     }
   }
 }