element plus中表格的合计属性和例子

news/2024/10/23 10:33:15/

在 element plus 表格中,您可以使用 summary-method 属性来指定一个函数,计算表格中列的合计或平均值等。该函数应该返回一个对象,其中包含每个列的合计值。例如,如果您的表格数据是这样的:

[{ name: 'John', age: 20, score: 80 },{ name: 'Mary', age: 22, score: 90 },{ name: 'Peter', age: 21, score: 85 }
]

您可以这样设置表格的 summary-method

<el-table :data="tableData" :summary-method="getSummary">

然后实现 getSummary 函数:

methods: {getSummary({ columns, data }) {const sums = []columns.forEach((column, index) => {if (index === 0) {sums[index] = '总计'return}const 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)sums[index] += ' 分'} else {sums[index] = 'N/A'}})return sums}
}

在这个例子中,我们处理每个列的数据,并返回一个数组,包含每列的合计值。我们还通过在第一列插入一个“总计”的文本来使它在表格底部居中显示。您可以根据需要修改这个函数来计算特定列的平均值或其他合计方式。

完整的例子:

<template><el-table :data="tableData" :summary-method="getSummary"><el-table-column label="Name" prop="name"></el-table-column><el-table-column label="Age" prop="age"></el-table-column><el-table-column label="Score" prop="score"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ name: 'John', age: 20, score: 80 },{ name: 'Mary', age: 22, score: 90 },{ name: 'Peter', age: 21, score: 85 }]}},methods: {getSummary({ columns, data }) {const sums = []columns.forEach((column, index) => {if (index === 0) {sums[index] = '总计'return}const 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)sums[index] += ' 分'} else {sums[index] = 'N/A'}})return sums}}
}
</script>


http://www.ppmy.cn/news/1239331.html

相关文章

HTTP状态码:404 Not Found错误之谜

文章目录 HTTP 404 Not Found错误 404出现形式导致 HTTP 404 错误的原因&#xff1f;推荐阅读 HTTP 404 Not Found 错误 404&#xff0c;也称为“HTTP 404 Not Found”&#xff0c;是当无法找到所请求的资源时 Web 服务器返回的HTTP 状态代码。 简单来说&#xff0c;这意味着…

swingbench造数失败可能原因及解决方法

swingbench造数失败解决方法 1.临时表空间文件内存不足&#xff0c;扩展临时表空间文件内存 alter database tempfile/home/oracle/oradata/orcl/temp01.dbf resize 30G;&#xff08;这里扩展完temp临时表空间后可以造数成功&#xff0c;则不需要扩展soe用户表空间&#xff09…

OpenAI再次与Sam Altman谈判;ChatGPT Voice正式上线

11月22日&#xff0c;金融时报消息&#xff0c;OpenAI迫于超过700名员工联名信的压力&#xff0c;再次启动了与Sam Altman的谈判&#xff0c;希望他回归董事会。 在Sam确定加入微软后&#xff0c;OpenAI超700名员工签署了一封联名信&#xff0c;要求Sam和Greg Brockman&#x…

创建maven的web项目

&#xff08;一&#xff09;创建maven的web项目 Step1、创建一个普通的maven项目 &#xff08;1&#xff09;新建一个empty project&#xff0c;命名为SSM2。 点击项目名&#xff0c;右键new&#xff0c;选择Module&#xff0c;左侧选择“Maven archetype”&#xff0c;可以给…

2023 hnust 湖南科技大学 信息安全管理课程 期中考试 复习资料

前言 ※老师没画重点的补充内容★往年试卷中多次出现或老师提过的&#xff0c;很可能考该笔记是奔着及格线去的&#xff0c;不是奔着90由于没有听过课&#xff0c;部分知识点不一定全&#xff0c;答案不一定完全正确 题型 试卷有很多题是原题 判断题&#xff08;PPT&#xff…

LeetCode-1689. 十-二进制数的最少数目 C/C++实现 超详细思路及过程[M]

&#x1f388;归属专栏&#xff1a;深夜咖啡配算法 &#x1f697;个人主页&#xff1a;Jammingpro &#x1f41f;记录一句&#xff1a;上一篇博客这里好像没改&#xff0c;那就不改了。 文章目录 LeetCode-1689. 十-二进制数的最少数目&#x1f697;题目&#x1f686;题目描述&…

R语言——taxize(第五部分)

taxize&#xff08;第五部分&#xff09; 3. taxize 文档中译3.71. nbn_synonyms&#xff08;从 NBN 返回具有给定 id 的分类群名称的所有同义词&#xff09;3.72. ncbi_children&#xff08;在 NCBI 中搜索类群的子类群&#xff09;3.73. ncbi_downstream&#xff08;检索 NCB…

wpf使用CefSharp.OffScreen模拟网页登录,并获取身份cookie,C#后台执行js

目录 框架信息&#xff1a;MainWindow.xamlMainWindow.xaml.cs爬取逻辑模拟登录拦截请求Cookie获取 CookieVisitorHandle 框架信息&#xff1a; CefSharp.OffScreen.NETCore 119.1.20 MainWindow.xaml <Window x:Class"Wpf_CHZC_Img_Identy_ApiDataGet.MainWindow&qu…