Table 表格 | Element Plus
<template><el-table :data="tableData" border show-summary :summary-method="getSummariesss" style="width: 100%"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="Name" /><el-table-column prop="amount1" sortable label="Amount 1" /><el-table-column prop="amount2" sortable label="Amount 2" /><el-table-column prop="amount3" sortable label="Amount 3" /></el-table></template><script lang="ts" setup>import { h } from 'vue'import type { VNode } from 'vue'import type { TableColumnCtx } from 'element-plus'interface Product {id: stringname: stringamount1: stringamount2: stringamount3: number}interface SummaryMethodProps<T = Product> {columns: TableColumnCtx<T>[]data: T[]}const getSummariesss = (param: SummaryMethodProps)=>{const { columns, data } = paramconst sums = []columns.forEach((column, index) => {if (index === 0) { //需要显示'总金额'的列 坐标 :0 sums[index] = '总金额'return}else if( index=== 3 || index=== 4){ //需要显示总和的列 坐标 : 3 4const values = data.map(item => Number(item[column.property]))if (!values.every(value => isNaN(value))) {sums[index] = values.reduce((prev, curr) => {const value = Number(curr)if (!isNaN(value)) {return prev + curr} else {return prev}}, 0)} else {sums[index] = 'N/A'}}})return sums}const tableData: Product[] = [{id: '12987122',name: 'Tom',amount1: '234',amount2: '3.2',amount3: 10,},{id: '12987123',name: 'Tom',amount1: '165',amount2: '4.43',amount3: 12,},{id: '12987124',name: 'Tom',amount1: '324',amount2: '1.9',amount3: 9,},{id: '12987125',name: 'Tom',amount1: '621',amount2: '2.2',amount3: 17,},{id: '12987126',name: 'Tom',amount1: '539',amount2: '4.1',amount3: 15,},]</script>
