image

前言

  在现代数据驱动的社会中，数据分析和统计成为了非常重要的任务。为了更有效地分析数据和展示统计结果，前端开发人员可以使用Vue框架和Element Plus组件库来实现数据的统计和分析功能。以下是一个关于如何在 Element Plus 的 el-table 组件中实现行汇总功能的文档，这个示例将展示如何计算每行的特定列的总和并显示在一个额外的汇总行中。

一、准备工作

安装 Element Plus

  首先，确保已经安装了 Element Plus。如果还没有安装，可以使用 npm 或 yarn 进行安装：

npm install element-plus --save
# 或者使用 yarn yarn add element-plus

引入和注册 Element Plus

  在 Vue 项目中，首先需要引入并注册 Element Plus 的组件：

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

表尾合计功能实现

数据准备

  在进行数据的统计和分析之前，需要准备好相应的数据。可以从后端API获取数据，也可以使用假数据。为了方便起见，我们在本文中使用假数据。

[{"id":"12987122","name":"王小虎","amount1":"234","amount2":"3.2","amount3":10},{"id":"12987123","name":"王小虎","amount1":"165","amount2":"4.43","amount3":12},{"id":"12987124","name":"王小虎","amount1":"324","amount2":"1.9","amount3":9},{"id":"12987125","name":"王小虎","amount1":"621","amount2":"2.2","amount3":17},{"id":"12987126","name":"王小虎","amount1":"539","amount2":"4.1","amount3":15}
]

基础的表尾合计功能

  在使用Element Plus时，表格合计是一个常见的需求，通常用于在表格底部显示某列或某几列数据的总和。在Element Plus中，可以通过配置表格的列定义来实现合计行，它可以帮助我们快速对表格中的数据进行汇总和展示。在 Vue 中实现表格的表尾合计功能相当简单，el-table通过添加 show-summary 属性即可在表格底部显示合计行，实现基础表尾合计功能。这个功能默认是关闭的，需要显式开启。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 sum-text 配置），其余列会将本列所有数值进行求合操作，并显示出来。

<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue'
import { version as epVersion } from 'element-plus'
import { ref, version as vueVersion } from 'vue'const tableDataWithSummary = ref([{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10},{id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12},{id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9},{id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}
]);</script><template><p><el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>Element Plus {{ epVersion }} + Vue {{ vueVersion }}</p><el-divider /><div><el-table :data="tableDataWithSummary" border style="width: 100%" show-summary><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" sortable label="数值 1" /><el-table-column prop="amount2" sortable label="数值 2" /><el-table-column prop="amount3" sortable label="数值 3" /></el-table></div><div><el-table :data="tableDataWithSummary" border style="width: 100%" show-summary sum-text="总价"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" sortable label="数值 1" /><el-table-column prop="amount2" sortable label="数值 2" /><el-table-column prop="amount3" sortable label="数值 3" /></el-table></div>
</template>

image

进阶的表尾合计功能

  我们已经成功实现了基础的表尾合计功能，但业务需求可能更为复杂，例如，我们希望在合计金额上再加上特定的货币符号和百分比等。这时，我们可以利用summary-method这个属性来定义自己的合计计算方法。这个属性接受一个函数作为参数，其中包含了列信息和数据信息，然后该函数将用于计算并返回一个合计结果数组。

<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue'
import { version as epVersion } from 'element-plus'
import { ref, version as vueVersion } from 'vue'
import {VNode} from "vue";// 需要进行统计的列
const summaryColumns = ref(["amount1"])const tableDataWithSummary = ref([{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10},{id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12},{id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9},{id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}
]);// 尾部计算合计
const getSummaries = (param: {columns: any[]; // 所有列的集合data: any[]; // 原始数据
}) => {const {columns, data} = param;const sums: ( number | string | VNode)[] = [];columns.forEach((column, index) => {// 第一列不进行求和操作，例如日期列或不需要的列，通用显示文字'合计'或其他标识符，根据需要自定义。if (index === 0) {sums[index] = '合计';return;}// 最后一列通常是操作列，不进行求和操作，可以留空或者根据需要显示文字。// if (index === columns.length - 1) {// sums[index] = '';// return;// }// 判断遍历的数据类型是否能转换成数值类型，如果可以就表明值是 number类型，否则是string类型。判断string类型是否是空字符串，为空字符换成0，不为空字符串就不做处理。const values = data.map((item) => !isNaN(Number(item[column.property])) ? !isNaN(parseFloat(item[column.property])) ? parseFloat(item[column.property]) : item[column.property] == '' ? 0 : item[column.property] : item[column.property]);// 一个空的结果数组，用来存放每一列的和let sum: any = null;//判断数组中是否包含有string类型的值，并且是否能转换成number类型(空字符串换成number类型为0)。如果不行，那就是说明包含了字符串类型的值。if (values.every(item => !isNaN(Number(item)))) {// 这是个遍历数组的方法（用作累加器），第一个参数为回调函数，第二个参数为累加初始值。sum = values.reduce((total, currentValue) => {const value = Number(total);// 确定数据是否为空,不为空进行计算,为空返回原值if (!isNaN(value)) {return total + currentValue;} else {return total;}}, 0);} else {// 判断是否为空，如果不为空就赋值sumvalues.map(item => {if (item != '') {sum = 0}})}if (summaryColumns.value.includes(column.property)) {sums[column.property] = sum;}});// 根据实际列顺序返回 sums 数组return columns.map((_, index) =>index === 0 ? sums[0] : sums[columns[index].property] || "")
}
</script><template><p><el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>Element Plus {{ epVersion }} + Vue {{ vueVersion }}</p><el-divider /><div><el-table :data="tableDataWithSummary" border style="width: 100%" show-summary :summary-method="getSummaries"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" sortable label="数值 1" /><el-table-column prop="amount2" sortable label="数值 2" /><el-table-column prop="amount3" sortable label="数值 3" /></el-table></div>
</template>

  上段代码的功能是对表格中的数据进行合计处理。首先，通过解构赋值从参数中获取到columns和data，其中columns代表每列数据的属性，通常在HTML中使用prop属性进行绑定。然后，利用forEach方法遍历每一列，对于每一列的数据，我们使用reduce()方法进行合计，并将结果存储在sums数组中对应的位置。这样，最终我们得到了一个包含各列合计结果的数组。
image

  需要注意的是，在实际的业务场景中，表格的数据可能涉及多页，单页计算可能并不足够，后端通常需要生成专门的合计字段来进行处理，通过接口返回给前端，前端展示表尾合计行。

<script setup lang="ts">
import {ElementPlus} from '@element-plus/icons-vue'
import {version as epVersion} from 'element-plus'
import {ref, version as vueVersion} from 'vue'
import {TableColumnCtx} from "element-plus";
import {VNode} from "vue";const tableDataWithSummary = ref({tableData: [{id: '12987122', name: '王小虎', amount1: '234', amount2: '3.2', amount3: 10},{id: '12987123', name: '王小虎', amount1: '165', amount2: '4.43', amount3: 12},{id: '12987124', name: '王小虎', amount1: '324', amount2: '1.9', amount3: 9},{id: '12987125', name: '王小虎', amount1: '621', amount2: '2.2', amount3: 17},{id: '12987126', name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15}], tableSum: {amount1Sum: 1883,amount2Sum: 15.83,amount3Sum: 63}
});interface UserInfo {id: string;name: string;amount1: string;amount2: string;amount3: number;
}interface SummaryMethodProps<T = UserInfo> {columns: TableColumnCtx<T>[] // 所有列的集合data: T[] // 原始数据
}// 尾部计算合计
const getSummaries = (param: SummaryMethodProps) => {const sums: (string | number | VNode)[] = [];param.columns.forEach((column, index) => {// 第一列不进行求和操作，例如日期列或不需要的列，通用显示文字'合计'或其他标识符，根据需要自定义。if (index === 0) {sums[index] = '合计';return;}// 根据当前列绑定的字段名进行判断，根据字段名决定展示什么内容switch (column.property) {case 'amount1':sums[index] = tableDataWithSummary.value.tableSum.amount1Sum;break;case 'amount2':sums[index] = tableDataWithSummary.value.tableSum.amount2Sum;break;case 'amount3':sums[index] = tableDataWithSummary.value.tableSum.amount3Sum;break;default:sums[index] = '';break;}});// 根据实际列顺序返回 sums 数组return param.columns.map((_, index) =>index === 0 ? sums[0] : sums[index] || '')
}
</script><template><p><el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>Element Plus {{ epVersion }} + Vue {{ vueVersion }}</p><el-divider /><div><el-table :data="tableDataWithSummary.tableData" style="width: 100%" show-summary :summary-method="getSummaries"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" sortable label="数值 1" /><el-table-column prop="amount2" sortable label="数值 2" /><el-table-column prop="amount3" sortable label="数值 3" /></el-table></div>
</template>

image

小结

  使用Vue和Element Plus可以方便地实现数据的统计功能。在本文中，我们介绍了如何展示数据、统计数据，并提供了相关的代码示例。在实际项目中，可以根据具体需求进一步扩展和优化该组件。

image

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/92392.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/92392.shtml
英文地址，请注明出处：http://en.pswp.cn/diannao/92392.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

神经网络 非线性激活层 正则化层 线性层

神经网络 非线性激活层 正则化层 线性层

神经网络 非线性激活层 作用&#xff1a;增强模型的非线性拟合能力 非线性激活层网络&#xff1a; class activateNet(nn.Module):def __init__(self):super(activateNet,self).__init__()self.relu nn.ReLU()self.sigmoid nn.Sigmoid()def forward(self,input):#output sel…
阅读更多...
【Vue进阶学习笔记】组件通信专题精讲

【Vue进阶学习笔记】组件通信专题精讲

目录前言props 父传子原理说明使用场景代码示例父组件 PropsTest.vue子组件 Child.vue自定义事件 $emit 子传父原理说明使用场景代码示例父组件 EventTest.vue子组件 Event2.vueEvent Bus 兄弟/跨层通信原理说明使用场景代码示例事件总线 bus/index.ts兄弟组件通信示例Child2.v…
阅读更多...
【PTA数据结构 | C语言版】求最小生成树的Prim算法

【PTA数据结构 | C语言版】求最小生成树的Prim算法

本专栏持续输出数据结构题目集&#xff0c;欢迎订阅。 文章目录题目代码题目 请编写程序&#xff0c;实现在带权的无向图中求最小生成树的 Prim 算法。 注意&#xff1a;当多个待收录顶点到当前点集的距离等长时&#xff0c;按编号升序进行收录。 输入格式&#xff1a; 输入首…
阅读更多...
【加解密与C】Rot系列(四)RotSpecial

【加解密与C】Rot系列(四)RotSpecial

RotSpecial 函数解析RotSpecial 是一个自定义函数&#xff0c;通常用于处理特定的旋转操作&#xff0c;尤其在图形变换或数据处理中。该函数可能涉及欧拉角、四元数或其他旋转表示方法&#xff0c;具体行为取决于实现上下文。以下是关于该函数的通用解释和可能的使用方法&#…
阅读更多...
【机器学习深度学习】LLaMAFactory中的精度训练选择——bf16、fp16、fp32与pure_bf16深度解析

【机器学习深度学习】LLaMAFactory中的精度训练选择——bf16、fp16、fp32与pure_bf16深度解析

目录 前言 一、 为什么精度如此重要&#xff1f;—— 内存、速度与稳定性的三角博弈 二、 四大精度/模式详解&#xff1a; bf16, fp16, fp32, pure_bf16 三、 关键特性对比表 ▲四大计算类型核心对比表 ▲ 显存占用对比示例&#xff08;175B参数模型&#xff09; ▲LLa…
阅读更多...
C# 基于halcon的视觉工作流-章21-点查找

C# 基于halcon的视觉工作流-章21-点查找

C# 基于halcon的视觉工作流-章21-点查找 本章目标&#xff1a; 一、检测显著点&#xff1b; 二、Harris检测兴趣点&#xff1b; 三、Harris二项式检测兴趣点&#xff1b; 四、Sojka运算符检测角点&#xff1b; 五、Lepetit算子检测兴趣点&#xff1b;一、检测显著点 halcon算子…
阅读更多...
（11）机器学习小白入门YOLOv：YOLOv8-cls epochs与数据量的关系

（11）机器学习小白入门YOLOv：YOLOv8-cls epochs与数据量的关系

YOLOv8-cls epochs与数据量的关系 (1)机器学习小白入门YOLOv &#xff1a;从概念到实践 (2)机器学习小白入门 YOLOv&#xff1a;从模块优化到工程部署 (3)机器学习小白入门 YOLOv&#xff1a; 解锁图片分类新技能 (4)机器学习小白入门YOLOv &#xff1a;图片标注实操手册 (5)机…
阅读更多...
Grafana | 如何将 11.x 升级快速到最新 12.x 版本?

Grafana | 如何将 11.x 升级快速到最新 12.x 版本?

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ]&#x1f4e2; 大家好&#xff0c;我是 WeiyiGeek&#xff0c;一名深耕安全运维开发&#xff08;SecOpsDev&#xff09;领域的技术从业者&#xff0c;致力于探索DevOps与安全的融合&#xff08;Dev…
阅读更多...
Dubbo + Spring Boot + Zookeeper 快速搭建分布式服务

Dubbo + Spring Boot + Zookeeper 快速搭建分布式服务

Dubbo Spring Boot Zookeeper 快速搭建分布式服务 本文将详细介绍如何基于 Dubbo、Spring Boot 和 Zookeeper 快速搭建一个简单的分布式服务调用场景&#xff0c;包含服务提供者&#xff08;Provider&#xff09;、服务消费者&#xff08;Consumer&#xff09;及公共接口&…
阅读更多...
五分钟掌握 TDengine 数据文件的工作原理

五分钟掌握 TDengine 数据文件的工作原理

小 T 导读&#xff1a;今天我们来探讨一下——TDengine中的时序数据到底是如何存储的&#xff1f; 在上一期的文章《五分钟掌握 TDengine 时序数据的保留策略》中&#xff0c;我们知道了TDengine是如何按照时间段对数据进行分区来管理数据的。 接下来&#xff0c;我们和大家一起…
阅读更多...
Python爬虫实战：研究http-parser库相关技术

Python爬虫实战：研究http-parser库相关技术

一、研究背景与意义 在当今数字化时代，网络数据蕴含着巨大的价值。从商业决策、学术研究到社会治理，对海量网络信息的有效采集与分析至关重要。网络爬虫作为数据获取的核心工具，其性能与稳定性直接影响数据质量。然而，随着互联网技术的发展，网站反爬机制不断升级，传统爬…
阅读更多...
Go语言实战案例-批量重命名文件

Go语言实战案例-批量重命名文件

在《Go语言100个实战案例》中的 文件与IO操作篇 - 案例17&#xff1a;批量重命名文件 的完整内容&#xff0c;适合初学者实践如何使用 Go 操作文件系统并批量处理文件名。&#x1f3af; 案例目标实现一个小工具&#xff0c;能够批量重命名指定目录下的所有文件&#xff0c;例如…
阅读更多...
基于单片机非接触红外测温系统

基于单片机非接触红外测温系统

传送门 &#x1f449;&#x1f449;&#x1f449;&#x1f449;其他作品题目速选一览表 &#x1f449;&#x1f449;&#x1f449;&#x1f449;其他作品题目功能速览 概述 本设计实现了一种基于单片机的非接触式红外测温系统&#xff0c;适用于快速、安全测量物体表面温…
阅读更多...
Python 入门手札：从 0 到会--第十天Python常用的第三方库Numpy，Pandas，Matplotlib

Python 入门手札：从 0 到会--第十天Python常用的第三方库Numpy，Pandas，Matplotlib

目录 一、Numpy 1.NumPy 是什么&#xff1f; 1.1安装numpy 1.2 导入numpy模块 2.NumPy 的核心&#xff1a;ndarray 2.1 什么是 ndarray&#xff1f; 2.2 ndarray 的创建方式 2.3 常见属性&#xff08;用于查看数组结构&#xff09; 2.4 ndarray 的切片与索引 2.5 ndarr…
阅读更多...
mysql 性能优化之Explain讲解

mysql 性能优化之Explain讲解

EXPLAIN是 MySQL 中用于分析查询执行计划的重要工具&#xff0c;通过它可以查看查询如何使用索引、扫描数据的方式以及表连接顺序等信息&#xff0c;从而找出性能瓶颈。以下是关于EXPLAIN的详细介绍和实战指南&#xff1a;1. EXPLAIN 基本用法在SELECT、INSERT、UPDATE、DELETE…
阅读更多...
Redis 连接：深度解析与最佳实践

Redis 连接：深度解析与最佳实践

Redis 连接：深度解析与最佳实践 引言 Redis 作为一款高性能的内存数据结构存储系统，在当今的互联网应用中扮演着越来越重要的角色。高效的 Redis 连接管理对于保证系统的稳定性和性能至关重要。本文将深入探讨 Redis 连接的原理、配置以及最佳实践，帮助读者更好地理解和应…
阅读更多...
C语言---VSCODE的C语言环境搭建

C语言---VSCODE的C语言环境搭建

文章目录资源下载配置环境验证资源下载 站内下载 配置环境 解压压缩包&#xff0c;复制以下文件的路径 打开主页搜索系统环境变量 点击环境变量 选择系统变量中的Path&#xff0c;点击编辑 在最后面添加路径。 添加完成记得关机重启。 验证 重启电脑之后打开在Power…
阅读更多...
ojdbc对应jdk版本附下载地址（截止20250722）

ojdbc对应jdk版本附下载地址（截止20250722）

可以从Oracle官网查看&#xff0c; JDBC and UCP Downloads page
阅读更多...
Redis为什么被设计成是单线程的？

Redis为什么被设计成是单线程的？

Redis单线程模型解析 当我们说Redis是单线程时，特指"其网络IO和键值对读写操作由单个线程完成"。实际上，Redis仅网络请求模块和数据操作模块采用单线程设计，而持久化存储、集群支持等其他模块都采用了多线程架构。 事实上，Redis从4.0版本就开始对部分命令实现了…
阅读更多...
基础流程图

基础流程图

一、常用符号及定义二、 画图基础规则1、从上至下&#xff0c;从左至右流向顺序。2、开始符号只能有一个出口。3、进程符号不做校验逻辑。4、相同流程图&#xff0c;符号大小应为一致。5、引用流程&#xff0c;不重复绘制。6、路径符号尽量避免交叉重叠。7、同一路径&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023