购物车添加合计

src/views/hard/components/shop-car.vue

@@ -7,6 +7,8 @@
 			:cell-style="tableStyle.cellStyle"
 			:header-cell-style="tableStyle.headerCellStyle"
 			@sort-change="sortChangeHandle"
+			show-summary
+			:summary-method="getSummaries"
 		>
 			<el-table-column label="商品名" align="center" prop="productName" />
 			<el-table-column label="商品图片" align="center" prop="code">
@@ -14,7 +16,7 @@
 					<preview-image v-if="row.productPic" :src="row.productPic" />
 				</template>
 			</el-table-column>
-			<el-table-column label="商品价格" align="center" prop="ticketId">
+			<el-table-column label="商品价格" align="center" prop="productPrice">
 				<template #default="{ row }">
 					<span>{{ displayPrice(row.productPrice) }}</span>
 				</template>
@@ -39,6 +41,8 @@
 import { BasicTableProps, useTable } from "/@/hooks/table"
 import * as hardCar from "/@/api/hard/hard-car"
 import { displayPrice } from "/@/utils/formatMoney"
+import { TableColumnCtx } from "element-plus"
+import { VNode } from "vue"
 
 // 定义变量内容
 const visible = ref(false)
@@ -62,6 +66,43 @@ const openDialog = (id: string) => {
 	}
 }
 
+interface SummaryMethodProps<T = any> {
+	columns: TableColumnCtx<T>[]
+	data: T[]
+}
+
+const getSummaries = (param: SummaryMethodProps) => {
+	const { columns, data } = param
+	const sums: (string | VNode)[] = []
+	columns.forEach((column, index) => {
+		if (index === 0) {
+			sums[index] = "合计"
+			return
+		}
+		if (column.property === "productPrice" || column.property === "totalPrice") {
+			const values = data.map((item) => Number(item[column.property]))
+			if (!values.every((value) => Number.isNaN(value))) {
+				sums[index] = displayPrice(
+					values.reduce((prev, curr) => {
+						const value = Number(curr)
+						if (!Number.isNaN(value)) {
+							return prev + curr
+						} else {
+							return prev
+						}
+					}, 0),
+				)
+			} else {
+				sums[index] = "N/A"
+			}
+		} else {
+			sums[index] = ""
+		}
+	})
+
+	return sums
+}
+
 // 暴露变量
 defineExpose({
 	openDialog,