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

需求描述

某些时候,我们表格展示数值型数据的时候,可能会想做一个合计处理,这样能直观的了解到当前列的总计数据信息。
遍观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.rhkb.cn/news/123154.html

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

相关文章

Java环境的安装

最近博主也是在学校开始学习了Java&#xff0c;也通过老师知道了可以通过大学生学生证申(bai)请(piao) IDEA的企业版&#xff08;社区版也是够学习用的&#xff09;有很多同学还是没有搞懂便做一下分享。 &#x1f331;博客主页&#xff1a;青竹雾色间. &#x1f618;博客制作…

算法笔记——路径问题

在引入介绍如何写一个算法的时候&#xff0c;我们先引入一个题作为例子 1137. 第 N 个泰波那契数 - 力扣&#xff08;LeetCode&#xff09; 作为刚开始学习算法的我们&#xff0c;看到这个题目的时候&#xff0c;应该想好以下的问题&#xff1a; 1.状态表示 我们要用什么来表…

MFC新建内部消息

提示&#xff1a;记录一下MFC新建内部消息的成功过程 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 先说一下基本情况&#xff0c;因为要在mapview上增加一个显示加载时间的功能。然后发现是要等加载完再显示时间&#xff0c;显示在主…

整理mongodb文档:分页

个人博客 整理mongodb文档:分页 个人博客&#xff0c;求关注&#xff0c;如果文章不够清晰&#xff0c;麻烦指出。 文章概叙 本文主要讲下在聚合以及crud的find方法中如何使用limit还有skip进行排序。 分页的情况很经常出现&#xff0c;这也是这篇博客诞生的理由。 数据准备…

uniapp移动端h5设计稿还原

思路 动态设置html的font-size大小 实现步骤 先创建一个public.css文件&#xff0c;设置初始的font-size大小 /* 注意这样写 只能使用css文件, scss 是不支持的, setProperty 只适用于原生css上 */ html {--gobal-font-size: 0.45px; } .gobal-font-size {font-size: var(--g…

面试中的身体语言:非语言信息的重要性

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Termux配置bashrc,终端长路径改为短路径

Termux配置bashrc termux的bashrc在$HOME/../usr/etc目录下 先使用cd命令进入用户主目录 然后cd ../usr/etc&#xff0c;ls可以发现&#xff0c;存在一个名为bash.bashrc的文件 使用vim或者其它编辑器打开 大概在第15行 PS1\[\e[0;32m\]\w\[\e[0m\] \[\e[0;97m\]\$\[\e[0…

六安RapidSSL泛域名https能保护几个域名

RapidSSL是Geotrust旗下的子品牌&#xff0c;Geotrust是国际知名的CA认证机构&#xff0c;每年都要通过WebTrust年检&#xff0c;而Geotrust旗下的https证书已经应用于市场多年&#xff0c;Geotrust的子品牌RapidSSL证书经营的DV基础型泛域名https证书也受到市场的欢迎。今天就…

如何使用SpringCloud Eureka 创建单机Eureka Server-注册中心

&#x1f600;前言 本篇博文是关于使用SpringCloud Eureka 创建单机Eureka Server-注册中心&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&…

2022年12月 C/C++(八级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:生理周期 人生来就有三个生理周期,分别为体力、感情和智力周期,它们的周期长度为23天、28天和33天。每一个周期中有一天是高峰。在高峰这天,人会在相应的方面表现出色。例如,智力周期的高峰,人会思维敏捷,精力容易高度集中。因…

【已解决】使用xshell来ssh到vmware的虚拟机,请求超时的问题

我的情况&#xff1a; 1.本地ping虚拟机请求超时&#xff0c;但是虚拟机ping本地成功 2.本地和虚拟机的防火墙都关了&#xff0c;ssh服务也开了 3.端口也是正确的 百思不得其解&#xff0c;不知道为什么就是连接不上 当出现这种情况的时候&#xff0c;可以考虑一下vmware的…

postgresql 安装教程

postgresql 安装教程 本文以window 15版本为教程 文章目录 postgresql 安装教程1.下载地址2.以管理员身份运行3.选择安装路径&#xff0c;点击Next4.选择组件&#xff08;默认都勾选&#xff09;&#xff0c;点击Next5.选择数据存储路径&#xff0c;点击Next6.设置超级用户的…

Blazor前后端框架Known-V1.2.14

V1.2.14 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazo…

展厅显示大屏怎么选,展厅使用哪种显示大屏好?

近年来&#xff0c;随着信息化科技快速发展&#xff0c;越来越多的企事业单位的展厅都会采用显示大屏来展现各种信息。那么&#xff0c;展厅显示大屏怎么选&#xff0c;哪种显示大屏更好&#xff1f;接下来&#xff0c;小灰从专业角度&#xff0c;用通俗易懂的文字为大家逐一分…

【算法训练-链表 三】【判断】判断链表中是否有环、判断链表是否为回文链表

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【链表的相关判断】&#xff0c;使用【链表】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为…

通过 Blob 对二进制流文件下载实现文件保存下载

原理&#xff1a;前端将二进制文件做转换实现下载: 请求后端接口->接收后端返回的二进制流(通过二进制流&#xff08;Blob&#xff09;下载,把后端返回的二进制文件放在 Blob 里面)->再通过file-saver插件保存 页面上使用&#xff1a; <span click"downloadFil…

Python Opencv实践 - 图像的距(Moments,Hu Moments)

参考资料&#xff1a;​​​​​​矩特征---OpenCV-Python开发指南&#xff08;25&#xff09;_cv2.moments_李元静的博客-CSDN博客 探究opencv中的moments函数和HuMoments函数_opencv moment_傲笑风的博客-CSDN博客 import cv2 as cv import numpy as np import matplotlib.…

Scrum敏捷模式的优势点、实践经验及适用企业

Scrum敏捷模式是一种灵活、适应性强的开发方法&#xff0c;其核心理念是以短周期、高频率的方式进行项目开发&#xff0c;确保团队能够快速响应变化。 Scrum包含三个角色&#xff1a;产品负责人&#xff08;Product Owner&#xff09;、Scrum Master和开发团队&#xff08;Tea…

环信uni-app-demo 升级改造计划——单人多人音视频通话(三)

前序文章&#xff1a; 环信 uni-app Demo升级改造计划——Vue2迁移到Vue3&#xff08;一&#xff09; 环信即时通讯SDK集成——环信 uni-app-demo 升级改造计划——整体代码重构优化&#xff08;二&#xff09; 概述 在将声网 uni-app 音视频插件正式集成进入环信的 uni-app…

箭头函数(arrow function)与普通函数之间的区别是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 语法简洁性&#xff1a;⭐ this 的绑定&#xff1a;⭐ 不能用作构造函数&#xff1a;⭐ 没有 arguments 对象&#xff1a;⭐ 不适用于方法&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上…