sc

src/views/Home/Comp/SignListCard.vue

@@ -36,15 +36,27 @@
         <el-button @click="handleReset">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-table :data="tableList" border stripe>
+    <el-table :data="tableList" border stripe show-summary :summary-method="getSummaries">
       <el-table-column label="周期" prop="period" width="110px" />
       <el-table-column prop="signNumber" label="成交数" />
       <el-table-column prop="signPrice" label="成交额" />
-      <el-table-column prop="signPriceSequentialGrowth" label="成交额环比增长" />
-      <el-table-column prop="signPriceSamePeriodCompareGrowth" label="成交额同比增长" />
+      <el-table-column
+        prop="signPriceSequentialGrowth"
+        label="成交额环比增长"
+        :formatter="parseRate"
+      />
+      <el-table-column
+        prop="signPriceSamePeriodCompareGrowth"
+        label="成交额同比增长"
+        :formatter="parseRate"
+      />
       <el-table-column prop="profit" label="利润" />
-      <el-table-column prop="profitSequentialGrowth" label="利润环比增长" />
-      <el-table-column prop="profitSamePeriodCompareGrowth" label="利润同比增长" />
+      <el-table-column prop="profitSequentialGrowth" label="利润环比增长" :formatter="parseRate" />
+      <el-table-column
+        prop="profitSamePeriodCompareGrowth"
+        label="利润同比增长"
+        :formatter="parseRate"
+      />
       <el-table-column prop="notReceivedMoney" label="未到账金额" />
       <el-table-column prop="receivedMoney" label="已到账金额" />
       <el-table-column prop="waitSettleMoney" label="待结算金额" />
@@ -100,6 +112,38 @@ async function handleSearch() {
     loading.value = false
   }
 }
+
+function parseRate(row, column) {
+  return Number(row[column.property] * 100).toFixed(2) + '%'
+}
+
+function getSummaries({ columns, data }) {
+  let sums = []
+  columns.forEach((column, index) => {
+    if (index == 0) {
+      sums[index] = '合计'
+      return
+    }
+    const values = data.map((item) => Number(item[column.property]))
+    if (!values.every((value) => Number.isNaN(value))) {
+      if (column.property.includes('Growth')) {
+        sums[index] = ''
+      } else {
+        sums[index] = values.reduce((prev, curr) => {
+          const value = Number(curr)
+          if (!Number.isNaN(value)) {
+            return prev + curr
+          } else {
+            return prev
+          }
+        }, 0)
+      }
+    } else {
+      sums[index] = ''
+    }
+  })
+  return sums
+}
 </script>
 
 <style lang="scss" scoped></style>