History person detail table add sum row

src/views/gambleMember/history/index.vue

     </div>
 
     <el-dialog title="個人詳細資料" :visible.sync="dialogFormVisible" width="75%" center>
-      <!-- <el-form ref="dataForm" :model="temp" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>-->
       <el-table :data="dialogList" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
-        style="width: 100%">
+        style="width: 100%" :summary-method="getSummaries" show-summary>
         <el-table-column align="center" label='數目' >
           <template slot-scope="scope">
             {{scope.$index + 1}}
       })
     },
     handlePersonDetail(row) {
-      this.listLoading = true      
+      this.listLoading = true
       this.dialogFormVisible = true
       fetchPersonGameDetail(this.member.id, row['GambleGame-Bucket'].id).then(response => {
         this.dialogList = response.data.rows
-        this.listLoading = false        
+        this.listLoading = false
       })
     },
     handleGameDetail() {
     },
     moment(time) {
       return moment(time).tz('Asia/Taipei').format('YYYY-MM-DD HH:mm:ss')
+    },
+    getSummaries() {
+      const sums = []
+      let totalWager = 0
+      let totalEarned = 0
+      let totalServiceFees = 0
+      if (this.dialogList) {
+        this.dialogList.map((memberRecord) => {
+          totalWager += memberRecord.wager
+          totalEarned += memberRecord.earned
+          totalServiceFees += memberRecord.serviceFees
+        })
+      }
+      sums[0] = '合計'
+      sums[1] = 'N/A'
+      sums[2] = 'N/A'
+      sums[3] = totalWager
+      sums[4] = totalEarned
+      sums[5] = totalServiceFees
+      return sums
     }
   },
   destroyed() {