vue3 elementplus table表格多行合计

表格底部如何多行合计
在这里插入图片描述

1.先在标签上定义合计方法

 <el-table:data="data":summary-method="getSummaries":show-summary="true"@selection-change="handleSelectionChange">

2.文件头部引入h函数渲染多行div,BigNumber 防止精度丢失。

import { reactive, onMounted, toRefs, ref, h } from 'vue';
import BigNumber from 'bignumber.js';
// 计算求和
function countTotal(arr, keyName) {let $total = 0;$total = arr.reduce(function (total, currentValue, currentIndex, arr) {return currentValue[keyName]? new BigNumber(total).plus(currentValue[keyName]).toString(): total;}, 0);return $total;
}function getSummaries(param: any) {const { columns, data } = param;const sums: string[] = [];const tit: string[] = [];let CNYObj = {waers: 'CNY'};let USDObj = {waers: 'USD'};const CNYArr = data.filter(item => item.waers === 'CNY');const USDArr = data.filter(item => item.waers === 'USD');CNYObj.docmt_ttl_amt = countTotal(CNYArr, 'docmt_ttl_amt');CNYObj.paid_ttl_amt = countTotal(CNYArr, 'paid_ttl_amt');CNYObj.app_ttl_amt = countTotal(CNYArr, 'app_ttl_amt');CNYObj.acnt_lmt = countTotal(CNYArr, 'acnt_lmt');CNYObj.acnt_sm_lmt = countTotal(CNYArr, 'acnt_sm_lmt');CNYObj.num_lmt = countTotal(CNYArr, 'num_lmt');CNYObj.bank_lmt = countTotal(CNYArr, 'bank_lmt');CNYObj.notesr_lmt = countTotal(CNYArr, 'notesr_lmt');CNYObj.comm_notesp_lmt = countTotal(CNYArr, 'comm_notesp_lmt');CNYObj.bank_notesp_lmt = countTotal(CNYArr, 'bank_notesp_lmt');CNYObj.oth_pymt_term_lmt = countTotal(CNYArr, 'oth_pymt_term_lmt');USDObj.docmt_ttl_amt = countTotal(USDArr, 'docmt_ttl_amt');USDObj.paid_ttl_amt = countTotal(USDArr, 'paid_ttl_amt');USDObj.app_ttl_amt = countTotal(USDArr, 'app_ttl_amt');USDObj.acnt_lmt = countTotal(USDArr, 'acnt_lmt');USDObj.acnt_sm_lmt = countTotal(USDArr, 'acnt_sm_lmt');USDObj.num_lmt = countTotal(USDArr, 'num_lmt');USDObj.bank_lmt = countTotal(USDArr, 'bank_lmt');USDObj.notesr_lmt = countTotal(USDArr, 'notesr_lmt');USDObj.comm_notesp_lmt = countTotal(USDArr, 'comm_notesp_lmt');USDObj.bank_notesp_lmt = countTotal(USDArr, 'bank_notesp_lmt');USDObj.oth_pymt_term_lmt = countTotal(USDArr, 'oth_pymt_term_lmt');tit.push(CNYObj);tit.push(USDObj);titData.value = tit;columns.forEach((column, index) => {if (index === 0) {sums[index] = h('div', { class: '' }, [h('div', '金额合计'),h('br', '')]);return;}if (index === 1) {sums[index] = h('div', { class: '' }, [h('div', 'CNY'), h('div', 'USD')]);return;}if (index === 2) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 3) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 4) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 5) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 6) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 7) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 8) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 9) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 10) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 11) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}if (index === 12) {sums[index] = h('div', { class: '' }, [h('div', toThousandFilter(countTotal(CNYArr, column.property))),h('div', toThousandFilter(countTotal(USDArr, column.property)))]);return;}});return sums;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/862.html

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

相关文章

从零搭建一台基于ROS的自动驾驶车-----1.整体介绍

系列文章目录 北科天绘 16线3维激光雷达开发教程 基于Rplidar二维雷达使用Hector_SLAM算法在ROS中建图 Nvidia Jetson Nano学习笔记–串口通信 Nvidia Jetson Nano学习笔记–使用C语言实现GPIO 输入输出 Autolabor ROS机器人教程 文章目录 系列文章目录前言一、小车底盘二、激…

csproj文件常用设置及C#注释常用写法

csproj文件常用设置及C#注释常用写法 .NET新版SDK风格的csproj文件 打开可为空警告 <PropertyGroup><Nullable>enable</Nullable> </PropertyGroup>启动全局引用using 下图没有任何using&#xff0c;仍然不报错 <PropertyGroup><Implicit…

电脑开机太慢!怎么让电脑开机速度变快?

电脑刚买来的时候&#xff0c;开机速度很快&#xff0c;用了一段时间后&#xff0c;开机速度越来越慢&#xff0c;甚至要等上好几分钟&#xff0c;这实在是太让人苦恼了!电脑开机太慢&#xff0c;怎么让电脑开机速度变快&#xff1f;其实想要解决这个问题很简单&#xff0c;我们…

基于Docker的JMeter分布式压测

目录 前言&#xff1a; Docker Docker在JMeter分布式测试中的作用 Dockerfile用于JMeter基础&#xff1a; Dockerfile for JMeter Server / Slave: 总结 前言&#xff1a; 基于Docker的JMeter分布式压测是一种将JMeter测试分布在多个容器中进行的方法&#xff0c;可以提高…

【强化学习】常用算法之一 “PPO”

作者主页&#xff1a;爱笑的男孩。的博客_CSDN博客-深度学习,活动,python领域博主爱笑的男孩。擅长深度学习,活动,python,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typeblog个…

数据结构与算法:栈和队列

1 栈 栈是一种后入先出&#xff08;LIFO&#xff09;的线性逻辑存储结构。只允许在栈顶进行进出操作。 1.1 栈基本操作 基本操作包括&#xff1a;入栈&#xff08;push&#xff09;/出栈&#xff08;pop&#xff09;/获取栈顶元素&#xff08;peek&#xff09;。 栈的实现主…

SpringBoot2+Vue2实战(四)进行组件内容拆分及路由实现

一、拆分 新建包&#xff1a; Aside和Header都是组件 User为视图 Aside.vue&#xff1a; <template><el-menu :default-openeds"[1, 3]" style"min-height: 100%; overflow-x: hidden"background-color"rgb(48, 65, 86)"text-color…

【Flume】高级组件之Sink Processors及项目实践(Sink负载均衡和故障转移)

文章目录 1. 组件简介2. 项目实践2.1 负载均衡2.1.1 需求2.1.2 配置2.1.3 运行 2.2 故障转移2.2.1 需求2.2.2 配置2.2.3 运行 1. 组件简介 Sink Processors类型包括这三种&#xff1a;Default Sink Processor、Load balancing Sink Processor和Failover Sink Processor。 Defa…

供应商索赔(金税数据)导入并创建凭证(ALV长篇备忘三)

情境/背景:供应商三包索赔款项源起QMS质量系统&#xff0c;联动金税系统完成发票开具&#xff0c;最终在SAP系统中创建完成财务凭证。该流程为手工操作&#xff0c;费时费力且效率低下容易出错。 目标/任务:把QMS供应商三包索赔业务搬上线,同SAP FI顾问梳理功能说明书&#xf…

星辰秘典:揭开Python项目的神秘密码——2048游戏

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;Python星辰秘典 &#x1f433;专栏&#xff1a;web开发&#xff08;html css js&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主页 前言&#xff1a;你好&#x…

一步一步学OAK之七:通过OAK相机实现特征跟踪

目录 特征跟踪Setup 1: 创建文件Setup 2: 安装依赖Setup 3: 导入需要的包Setup 4: 定义FeatureTrackerDrawer类定义变量定义onTrackBar方法定义trackFeaturePath方法定义drawFeatures方法定义FeatureTrackerDrawer类的构造函数 Setup 5: 创建pipelineSetup 6: 创建节点创建相机…

GIT保存记录原理之commit对象

GIT 中提交对象非常的重要&#xff0c;我们通过它记录代码提交过程、进行文件保存、回退等操作&#xff0c;那么它是怎样帮助我们记录这些信息的呢&#xff1f;其实就是都保存在项目根目录的 .git 文件夹中。 新建空项目 gitDemo使用 git init初始化&#xff0c;在文件夹根目录…