ant-table组件表格数据做合计行,并固定在表格底部

news2024/12/23 12:30:11

需求描述

某些时候,我们表格展示数值型数据的时候,可能会想做一个合计处理,这样能直观的了解到当前列的总计数据信息。
遍观Table组件,官方是没有提供这个功能的,这就需要我们自己处理了

需求分析

根据表格的特性,合计行作为当前表格的多余一行,需要处理当前页的数据、条数(条数不处理,翻页后有重复数据)
在这里插入图片描述
数据的处理方式可按照columns里面dataIndex定义的属性来配置,设置好后push进接口返回的表格数据中即可
在这里插入图片描述
在这里插入图片描述

示例

条数处理:
pageSize: current > 1 || pageSize % 10 !== 0 ? pageSize - 1 : pageSize,
表格数据处理:

let obj = {
            curDate: '总计',
            startAmount: list.reduce((sum, e) => sum + Number(e.startAmount), 0).toFixed(2),
            cashIncome: list.reduce((sum, e) => sum + Number(e.cashIncome), 0).toFixed(2),
            balanceIncome: list.reduce((sum, e) => sum + Number(e.balanceIncome), 0).toFixed(2),
            consumeOutcome: list.reduce((sum, e) => sum + Number(e.consumeOutcome), 0).toFixed(2),
            closeAccountOutcome: list.reduce((sum, e) => sum + Number(e.closeAccountOutcome), 0).toFixed(2),
            electricUsageOutcome: list.reduce((sum, e) => sum + Number(e.electricUsageOutcome), 0).toFixed(2),
            endAmount: list.reduce((sum, e) => sum + Number(e.endAmount), 0).toFixed(2),
          };
list.push(obj);

表格条数加1显示合计行:
this.pagination.pageSize = res.data.result.pageobject.size + 1;

附加

合计行一般显示的话,处理固定在最底部比较好

css样式做吸低固定:
<style lang="less" scoped>
/deep/.ant-table-row:last-child td {
  background: #fff;
  position: sticky;
  bottom: 0px;
  z-index: 1;
  box-shadow: 5px 0 10px #e4e4e4;
}
</style>

这里是飞鱼爱吃米,只授渔,不授鱼!

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

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

相关文章

链表逆置题

本题要求实现一个函数&#xff0c;将给定单向链表逆置&#xff0c;即表头置为表尾&#xff0c;表尾置为表头。链表结点定义如下&#xff1a; struct ListNode { int data; struct ListNode *next; }; 函数接口定义&#xff1a; struct ListNode *reverse( struct ListNode *hea…

TOWE雷达光敏感应开关,让生活更智能、更安全

现代生活中&#xff0c;智能家居成为人们追求品质生活的必备之选。其中&#xff0c;照明控制的智能化已然成为一种趋势&#xff0c;传统的灯光开关需要人们手动操作&#xff0c;既不方便&#xff0c;有时候也会造成资源的过度浪费&#xff0c;而雷达光敏感应开关的出现&#xf…

数据库中了malloxx勒索病毒了怎么办?勒索病毒解密

Malloxx是一种新兴的勒索病毒&#xff0c;它通常通过攻击计算机系统中的文件和数据来进行恶意加密和锁定。这种病毒已经引起了广泛的关注&#xff0c;因为它采用了先进的技术手段和策略&#xff0c;使得受害者很难自行解决问题。 Malloxx勒索病毒的攻击方式非常狡猾&#xff0c…

ClickHouse进阶(十):Clickhouse数据查询-4

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术,IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &#x1f4cc;订阅…

振弦采集仪应用地铁隧道安全监测详细解决方案

振弦采集仪应用地铁隧道安全监测详细解决方案 随着城市化进程的不断加快&#xff0c;地铁作为一种高效、便捷、环保的交通方式已经成为现代城市不可或缺的一部分。因此&#xff0c;对地铁的安全性也越来越重视&#xff0c;一般二三线以上的城市在不断发展中&#xff0c;地铁做…

Nginx 部署离线瓦片服务

nginx 部署离线瓦片服务&#xff0c;地图资源加载 一、下载离线瓦片数据&#xff0c;部署在本地二、nginx.conf 配置文件三、浏览器中访问 上一篇&#xff1a; nginx 安装与部署 一、下载离线瓦片数据&#xff0c;部署在本地 二、nginx.conf 配置文件 #user nobody; worker_…

从C语言到C++_38(C++的IO流+空间适配器)STL六大组件联系

目录 1. C语言的输入和输出和流 2. C的IO流 2.1 C标准IO流 2.2 C文件IO流 2.3 stringstream&#xff08;字符流&#xff09; 3. 空间配置器&#xff08;了解&#xff09; 3.1 一级空间适配器 3.2 二级空间配置器 3.3 二级空间适配器的空间申请 3.4 二级空间配置器的空…

企业架构LNMP学习笔记16

基于IP的访问控制&#xff1a; 基于ngx_http_access_module模块&#xff0c;默认可使用。 语法是&#xff1a; deny ip 禁止IP访问 allow ip 允许IP访问 上面是允许的&#xff0c;下面是deny的。 老师建议写在server段中是比较合适的。 基于用户的访问控制&#xff1a; …

UG\NX二次开发 获取基准平面的点和方向 UF_MODL_ask_datum_plane

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 简介: UG\NX二次开发 获取基准平面的点和方向 UF_MODL_ask_datum_plane 效果: 代码: #include "me.hpp"void ufusr(char* param, int* retcode, int par…

HarmonyOS实现几种常见图片点击效果

一. 样例介绍 HarmonyOS提供了常用的图片、图片帧动画播放器组件&#xff0c;开发者可以根据实际场景和开发需求&#xff0c;实现不同的界面交互效果&#xff0c;包括&#xff1a;点击阴影效果、点击切换状态、点击动画效果、点击切换动效。 相关概念 image组件&#xff1a;图片…

如何免费获取CDH集群技术支持

CDH拥有全球70% 的Hadoop用户&#xff0c;在国内也拥有庞大的用户群体。由于Cloudera 和Hortonworks 合并后厂商政策调整&#xff0c;不再更新、不再免费、不再提供服务&#xff0c;众多企业用户生产集群面临着进退两难的窘境和未知的技术风险。 社区版不再更新。Cloudera所有…

如何获取第三方maven依赖信息?

依赖信息查询方式&#xff1a; 1. maven仓库信息官网 https://mvnrepository.com/ 2. mavensearch插件搜索 1. maven仓库信息官网 https://mvnrepository.com/ 访问可能会比较慢 搜索你想要查找的依赖 点击你想要查找的依赖 打开是这个界面&#xff0c;点击对应版…

简单介绍下主数据管理(MDM)工具的发展趋势

主数据管理工具帮助组织管理内部和外部主数据&#xff0c;提升主数据管理的效率。主数据管理工具多种多样&#xff0c;打孔卡、纸质文件记录、目录卡片、数据库、应用系统&#xff0c;以及专业的主数据管理平台&#xff0c;都属于主数据管理工具。 随着主数据管理要求的不断变化…

指针和字符数组笔试题及其解析(第三组)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 第三组笔试题 char *p "abcdef";printf("%d\n", sizeof(p)); printf("%d\n", sizeof(p1)); printf("%d\n", sizeof(*p)); printf("%d\n", sizeof(p[0])); printf("%…

MATLAB基础-MAT文件的读写操作

简介 MAT文件是MATLAB格式的双精度二进制数据文件&#xff0c;由MATLAB软件创建&#xff0c;可以使用MATLAB软件再其他计算机上以其他浮点格式读取&#xff0c;同时也可以使用其他软件通过MATLAB的应用程序接口来进行读写操作。如果只是再MATLAB环境中处理数据&#xff0c;使用…

基于nginx+keepalived的负载均衡、高可用web集群

目录 基于nginxkeepalived的负载均衡、高可用web集群关闭所有机器的相关服务一、按照IP规划配置好静态IP。二、建立免密通道&#xff0c;使用Ansible自动化批量部署软件环境1、安装配置ansible2、编写主机清单3、在ansible上生成密钥对&#xff0c;并将公钥复制到其他主机上4、…

2023年9月惠州/深圳CPDA数据分析师认证找弘博创新

CPDA数据分析师认证是大数据方面的认证&#xff0c;助力数据分析人员打下扎实的数据分析基础知识功底&#xff0c;为入门数据分析保驾护航。 帮助数据分析人员掌握系统化的数据分析思维和方法论&#xff0c;提升工作效率和决策能力&#xff0c;遇到问题能够举一反三&#xff0c…

Android 查看当前手机、APP的ABI架构信息

目录 查看手机 查看APP 查看手机 命令&#xff1a;adb shell "getprop |grep cpu" 命令&#xff1a;adb shell getprop ro.product.cpu.abi 查看APP 在 data/system/packages.xml 文件中找到自己 app 的相关配置信息&#xff0c;这里有明确指出该去哪里加载 so…