当前位置: 首页> 教育> 大学 > Element-ui :el-table 中表尾合计行

Element-ui :el-table 中表尾合计行

时间:2025/7/12 2:31:00来源:https://blog.csdn.net/lryh_/article/details/140641804 浏览次数:0次

 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>

关键字:Element-ui :el-table 中表尾合计行

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: