钱包数据表格行尾合计

src/views/wallet/wallet-recharge-apply/preview-excel.vue

@@ -6,7 +6,14 @@
 					<right-toolbar class="ml10 mr20" style="float: right" :search="false" @queryTable="getList" />
 				</div>
 			</el-row>
-			<el-table :data="data.list" v-loading="state.loading" border :header-cell-style="tableStyle.headerCellStyle">
+			<el-table
+				:data="data.list"
+				v-loading="state.loading"
+				border
+				:header-cell-style="tableStyle.headerCellStyle"
+				show-summary
+				:summary-method="getSummaries"
+			>
 				<el-table-column type="index" label="#" align="center" width="60" />
 				<el-table-column prop="username" label="用户" align="center" />
 				<el-table-column prop="userAvatar" label="头像" align="center">
@@ -15,13 +22,13 @@
 					</template>
 				</el-table-column>
 				<el-table-column prop="userMobile" label="手机号" align="center" />
-				<el-table-column prop="username" label="操作金额" align="center">
+				<el-table-column prop="currentImport_price" label="操作金额" align="center">
 					<template #default="{ row }">
 						<div class="color-success">{{ displayPrice(row.currentImport_price) }}</div>
 					</template>
 				</el-table-column>
 				<slot v-if="data.tableList && data.tableList.length">
-					<el-table-column v-for="(v, i) in data.tableList" :key="i" align="center">
+					<el-table-column :prop="`${'aaa' + i}`" v-for="(v, i) in data.tableList" :key="i" align="center">
 						<template #header>
 							<div>
 								{{ data.tableListStr[i] }}
@@ -30,21 +37,21 @@
 						<template #default="{ row }">
 							<div class="change">
 								<div v-if="row[`${v}_price`] >= 0" class="change_price">{{ displayPrice(row[`${v}_price`]) }}</div>
-								<div v-else class="change_price">{{ displayPrice(row[`${v}_price`]) }}</div>
-								<div class="change_text">
-									<div v-if="row[`${v}_transaction_price`]">
+								<!-- <div v-else class="change_price">{{ displayPrice(row[`${v}_price`]) }}</div> -->
+								<!-- <div class="change_text"> -->
+								<!-- <div v-if="row[`${v}_transaction_price`]">
 										<span>对比上月</span>
 										<span :class="[row[`${v}_transaction_price`] >= 0 ? 'success' : 'error']" style="margin-left: 5px">
 											{{ displayPrice(row[`${v}_transaction_price`]) }}
 										</span>
-									</div>
-									<div v-if="row[`${v}_transaction_percent`]">
+									</div> -->
+								<!-- <div v-if="row[`${v}_transaction_percent`]">
 										<span>对比上月</span>
 										<span :class="[row[`${v}_transaction_price`] >= 0 ? 'success' : 'error']" style="margin-left: 5px">
 											{{ row[`${v}_transaction_percent`] }}%
 										</span>
-									</div>
-								</div>
+									</div> -->
+								<!-- </div> -->
 							</div>
 						</template>
 					</el-table-column>
@@ -56,10 +63,19 @@
 </template>
 
 <script setup lang="ts" name="preview-excel">
+import { computed } from "vue"
 import { BasicTableProps, useTable } from "/@/hooks/table"
 import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 import * as walletRechargeApplyApi from "/@/api/wallet/wallet-recharge-apply"
+import type { VNode } from "vue"
+import type { TableColumnCtx } from "element-plus"
+import { h } from "vue"
+
+interface SummaryMethodProps<T = any> {
+	columns: TableColumnCtx<T>[]
+	data: T[]
+}
 
 const { query } = useRoute()
 
@@ -115,10 +131,67 @@ const getList = async () => {
 		data.list = pageData.page.records
 		data.total = pageData.page.total
 		data.tableList = pageData.tableList
+		console.log(pageData.tableList)
 		data.tableListStr = pageData.tableListStr
 		state.pagination.total = pageData.page.total
 	} finally {
 		state.loading = false
 	}
 }
+
+// 表格行尾合计
+const getSummaries = (param: SummaryMethodProps) => {
+	const { columns, data: data1 } = param
+	const sums: (string | VNode | number)[] = []
+	columns.forEach((column, index) => {
+		if (index === 0) {
+			sums[index] = "合计"
+			return
+		}
+		if (column.property === "currentImport_price") {
+			const values = data1.map((item) => Number(item[column.property]))
+			if (!values.every((value) => Number.isNaN(value))) {
+				sums[index] = h("span", { style: { color: "#67C260" } }, [
+					displayPrice(
+						values.reduce((prev, curr) => {
+							const value = Number(curr)
+							if (!Number.isNaN(value)) {
+								return prev + curr
+							} else {
+								return prev
+							}
+						}, 0),
+					),
+				])
+			} else {
+				sums[index] = "NaN"
+			}
+		} else if (column.property === "aaa0") {
+			const str = data.tableList[0] + "_price"
+			sums[index] = displayPrice(
+				data.list.reduce((prev, curr) => {
+					return prev + curr[str]
+				}, 0),
+			)
+		} else if (column.property === "aaa1") {
+			const str = data.tableList[1] + "_price"
+			sums[index] = displayPrice(
+				data.list.reduce((prev, curr) => {
+					return prev + curr[str]
+				}, 0),
+			)
+		} else if (column.property === "aaa2") {
+			const str = data.tableList[2] + "_price"
+			sums[index] = displayPrice(
+				data.list.reduce((prev, curr) => {
+					return prev + curr[str]
+				}, 0),
+			)
+		} else {
+			sums[index] = ""
+		}
+	})
+
+	return sums
+}
 </script>