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

在 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.mzph.cn/news/168328.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode刷题笔记题解(C++):1008. 前序遍历构造二叉搜索树

思路&#xff1a; 1.树中的第一个值为根&#xff08;数组的第一个值&#xff09;&#xff0c;小于根的值存放在左子树中&#xff0c;大于根的值存放在右子树中&#xff1b; 2.利用递归对左右子树 /*** Definition for a binary tree node.* struct TreeNode {* int val;*…

什么是 TLS/SSL 握手

TLS/SSL 握手是一个加密过程&#xff0c;每当客户端&#xff08;如浏览器&#xff09;与服务器建立连接时&#xff0c;都会在后台进行&#xff0c;此握手协议有助于客户端和服务器之间的安全连接&#xff0c;从而促进隐私、数据完整性和机密性。 TLS/SSL 握手何时发生 每当客…

Python与设计模式--简单工厂模式

2-Python与设计模式–简单工厂模式 一、快餐点餐系统 想必大家一定见过类似于麦当劳自助点餐台一类的点餐系统吧。在一个大的触摸显示屏上&#xff0c;有三类可以选择的上餐品&#xff1a; 汉堡等主餐、小食、饮料。当我们选择好自己需要的食物&#xff0c;支付完成后&#x…

C#/.NET/.NET Core推荐学习书籍(已分类)

前言 古人云&#xff1a;“书中自有黄金屋&#xff0c;书中自有颜如玉”&#xff0c;说明了书籍的重要性。作为程序员&#xff0c;我们需要不断学习以提升自己的核心竞争力。以下是一些优秀的C#/.NET/.NET Core相关学习书籍&#xff0c;值得.NET开发者们学习和专研。书籍已分类…

常见树种(贵州省):015榧树、秋枫、滇合欢、锥栗、红豆树、刺槐、余甘子、黑荆、槐树、黄檀

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;PPBC中国植物图像库——最大的植物分类图片库 一、榧树 …

生物识别访问面临风险

安全公司 Blackwing Intelligence 发现了多个允许您绕过Windows Hello 身份验证的漏洞。 戴尔 Inspiron 灵越 15、联想 ThinkPad T14 和 Microsoft Surface Pro X笔记本电脑上会出现这种情况&#xff0c;原因是设备中集成了来自Goodix、Synaptics 和 ELAN的指纹传感器。 所有…

【数据结构 —— 堆的实现(顺序表)】

数据结构 —— 堆的实现&#xff08;顺序表&#xff09; 一.堆1.1堆的定义及结构1.1.1.堆的定义1.1.2.堆的性质1.1.3.堆的结构 二.堆的实现2.1.头文件的实现 —— &#xff08;Heap.h&#xff09;2.2.源文件的实现 —— &#xff08;Heap.c&#xff09;2.2.1.小堆的源文件2.2.2…

C#,数值计算——插值和外推,Powvargram的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Functor for variogram v(r)ar^b, /// where b is specified, a is fitted from the data. /// </summary> public class Powvargram { private do…

【Python 训练营】N_3 生成互不相同且不重复的数字

题目 有四个数字&#xff1a;1、2、3、4&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;各是多少&#xff1f; 分析 可填在百位、十位、个位的数字都是1、2、3、4。组成所有的排列后再去掉不满足条件的排列。 答案 for i in range(1,5):for j in range…

34970A 数据采集 / 数据记录仪开关单元

34970A 数据采集 / 数据记录仪开关单元 产品综述&#xff1a; Keysight 34970A 数据采集/数据记录仪开关单元由一个 3 插槽主机和一个内置的 6 1/2 位数字万用表组成。每个通道可以单独配置&#xff0c;以测量 11 种不同功能之一&#xff0c;这样既不会增加成本&#xff0c;也…

java大视频在线预览(支持断点下载)

1.说明 大视频的在线预览,如果不支持断点下载,将无法在苹果手机上播放,同时不支持进度条拖动. 之所以这样,是因为视频文件太大了,通过二进制流向浏览器传输时,整个文件尚未传输完成时,会被浏览器强制关闭流,不再接收,等缓存播放到一定程度时,浏览器会再次向后端请求视频文件,同…

Git仓库瘦身大作战:133M 到 4M 的实战

开局两张图 瘦身前瘦身后 目录 开局两张图前言下载 BFG克隆代码Git 仓库瘦身清理存储库储存库 GC推送仓库 Git 瘦身验证结语开源项目 前言 在进行项目开发的过程中&#xff0c;代码仓库的体积可能会逐渐增大&#xff0c;特别是在版本控制系统中保留了大量的历史提交记录和不必…

搜索引擎---项目测试

一)项目背景: 首先介绍一下项目:项目的目标是实现一个基于JAVAAPI的站内搜索引擎 java官方文档是在学习java语言中不可或缺的权威资料&#xff0c;相比于各种网站的Java资料&#xff0c;官方文档无论是语言表达还是组织方式都要更加全面和准确&#xff0c;因为没有人比作者更加…

【计算机网络笔记】数据链路层——差错编码

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

万字长文 - Python 日志记录器logging 百科全书 - 高级配置之 日志文件配置

万字长文 - Python 日志记录器logging 百科全书 - 高级配置之 日志文件配置 前言 在 Python 的logging模块中&#xff0c;它不仅提供了基础的日志功能&#xff0c;还拥有一系列高级配置选项来满足复杂应用的日志管理需求。 说到logging 模块的高级配置&#xff0c;必须提及日…

OpenCV- 学习笔记(Python)图像处理基础

本专栏&#xff1a;主要记录OpenCV&#xff08;Python&#xff09;学习笔记 OpenCV 图像处理基础 灰度图 import cv2 #opencv读取的格式是BGR import numpy as np import matplotlib.pyplot as plt#Matplotlib是RGB %matplotlib inline ​ imgcv2.imread(cat.jpg) img_gray…

新王加冕,GPT-4V 屠榜视觉问答

当前&#xff0c;多模态大型模型&#xff08;Multi-modal Large Language Model, MLLM&#xff09;在视觉问答&#xff08;VQA&#xff09;领域展现了卓越的能力。然而&#xff0c;真正的挑战在于知识密集型 VQA 任务&#xff0c;这要求不仅要识别视觉元素&#xff0c;还需要结…

电源控制系统架构(PCSA)之系统分区电源域

目录 4.2 电源域 4.2.1 电源模式 4.2.2 电源域的选择 4.2.3 系统逻辑 4.2.4 Always-On域 4.2.5 处理器Clusters 4.2.6 CoreSight逻辑 4.2.7 图像处理器 4.2.8 显示处理器 4.2.9 其他功能 4.2.10 电源域层次结构要求 4.2.11 SOC域示例 4.2 电源域 电源域在这里被定…

周末打算开发一个多平台同步分发文章的工具,从而实现真正意义上的万媒易发!

作为一名热衷于技术分享的程序员&#xff0c;我们常常面临的问题是如何高效地将原创文章分发到各大技术社区&#xff0c;以扩大影响力。为了解决这一挑战&#xff0c;我决定开发一款名为“万媒易发”的多平台自动发布文章工具&#xff0c;实现真正意义上的一键发布到各大平台的…

Ubuntu20.04上编译安装TVM

本文主要讲述如何在ubuntu20.04平台上编译TVM代码并在python中import tvm成功。 源代码下载&#xff1a; git clone --recursive https://github.com/apache/tvm tvm 平台环境升级&#xff1a; 1&#xff09; sudo apt-get update 2&#xff09; sudo apt-get install -y pyth…