el-table表尾添加合计行,自动合计,且特殊列自定义计算展示

效果如图
在这里插入图片描述
1.element-ui的table表格有合计功能,但是功能却不完善,会有不显示和计算出现错误的问题,项目中有遇到,所以记录下
在这里插入图片描述
show-summary:自动合计
getSummaries():对合计行进行特殊处理展示

 <el-tableborderid="tables":data="dnDatas"show-summarymax-height="400px"class="tables"@cell-click="editName2":row-class-name="tableRowClassName2":key="randomKey":summary-method="getSummaries">//getSummaries()返回的是一个展示的数组
//此方法中主要是将店名为001这种类型不要当成number类型来计算,方法可直接复制
//此方法另外是对列做计算,表格中毛利率的下标为7,所以index==7,再做除法赋值展示,
//导出功能excel,表格也会正常展示不会位移getSummaries(param) {const { columns, data } = paramconst sums = []columns.forEach((column, index) => {//第一个显示为合计if (index === 0) {sums[index] = '合计'return}const values = data.map((item) => item[column.property])//对表格数据进行循环values.map((item) => {//判断返回的是否为number数据类型if (typeof item === 'number' && item !== Infinity && !isNaN(item)) {//判断是否为时间戳if (item > 160000000000) {//若为时间戳则置为--sums[index] = '-'return} else {//对number数据进行累加sums[index] = values.reduce((prev, curr) => {const value = Number(curr)if (!isNaN(value)) {//解决js计算小数出现小数点后多位数字的问题return Math.floor((prev + curr) * 100) / 100} else {return prev}}, 0)}} else {//不为number类型则置为--sums[index] = '-'return}})if (index == 7) {var num = sums[6] / sums[4]console.log(sums[6])console.log(sums[4])if (!num == 0) {num = (num * 100).toFixed(2)sums[index] = num} else {sums[index] = '0'}}if (index == 15) {var numlj = sums[14] / sums[12]console.log(sums[6])console.log(sums[4])if (!numlj == 0) {numlj = (numlj * 100).toFixed(2)sums[index] = numlj} else {sums[index] = '0'}}})return sums},},

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

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

相关文章

高效利用隧道代理实现无阻塞数据采集

在当今信息时代&#xff0c;大量的有价值数据分散于各个网站和平台。然而&#xff0c;许多网站对爬虫程序进行限制或封禁&#xff0c;使得传统方式下的数据采集变得困难重重。本文将向您介绍如何通过使用隧道代理来解决这一问题&#xff0c;并帮助您成为一名高效、顺畅的数据采…

lab11 net

background 在开始写代码之前&#xff0c;回顾一下xv6book的第五章会有帮助你将使用E1000去处理网络通信 E1000会和qemu模拟的lan通信在qemu模拟的lan中 xv6的地址是10.0.2.15qemu模拟的计算机的地址是10.0.2.2 qemu会将所有的网络包都记录在packets.pcap中文件kernel/e1000.…

Docker 中下载各版本的 CentOS、CentOS Steam 方式

如果你跟我一样&#xff0c;想要在docker下载centos的镜像&#xff0c;但是无奈访问不了 https://hub.docker.com/&#xff0c;于是不知道有哪些tag可以下载&#xff0c;该如何办呢&#xff1f; 方法如下&#xff0c;以供参考。 访问&#xff1a;https://quay.io/repository/…

器件手册识读之 :运放

器件手册识读之 &#xff1a;运放 一、基本信息 二、引脚排列 三、最大额定参数 四、电气特性 五、应用电路 1、称重传感器放大器 2、热电偶低偏置&#xff0c;低漂移环路测量二极管冷端补偿。

【LeetCode】409. 最长回文串

409. 最长回文串&#xff08;简单&#xff09; 方法&#xff1a;哈希表 贪心 思路 不难发现&#xff0c;回文字符串一定是由 若干偶数个字符 至多一个奇数个字符 组成 。我们可以使用一个长度为 128 的 hash表来记录每一个字符的出现次数&#xff0c;当该字符出现了两次&am…

Java 复习笔记 - 方法篇

文章目录 一&#xff0c;方法的定义二&#xff0c;最简单的方法定义和调用三&#xff0c;带参数的方法定义和调用四&#xff0c;带返回值方法的定义和调用五&#xff0c;小结六&#xff0c;方法的重载七&#xff0c;方法简单练习1&#xff0c;数组遍历2&#xff0c;数组最大值3…

大彩串口屏使用记录

写在最前面 屏幕型号 DC10600M070 IDE VisualTFT&#xff08;官方&#xff09; VSCode&#xff08;lua编程&#xff09; 用之前看一下官方那个1小时的视频教程就大概懂控件怎么用了&#xff0c;用官方的软件VisualTFT很简单 本文只是简单记录遇到的一些坑 lua编辑器 VisualTF…

【安装GPU版本pytorch,torch.cuda.is_available()仍然返回False问题】

TOC 第一步 检查cuda是否安装&#xff0c;CUDA环境变量是否正确设置&#xff0c;比如linux需要设置在PATH&#xff0c;window下环境变量编辑看看&#xff0c;是否有CUDA 第二步&#xff0c;核查python中torch版本 首先查看你环境里的pytorch是否是cuda版本&#xff0c;我这…

ZooKeeper技术内幕

从系统模型、序列化与协议、客户端工作原理、会话、服务端工作原理以及数据存储等方面来向揭示ZooKeeper的技术内幕&#xff0c;更深入地了解ZooKeeper这一分布式协调框架。 1、系统模型 将从数据模型、节点特性、版本、Watcher和ACL五方面来讲述ZooKeeper的系统模型。 1.1、…

简易虚拟培训系统-UI控件的应用4

目录 Slider组件的常用参数 示例-使用Slider控制主轴 示例-Slider控制溜板箱的移动 本文以操作面板为例&#xff0c;介绍使用Slider控件控制开关和速度。 Slider组件的常用参数 Slider组件下面包含了3个子节点&#xff0c;都是Image组件&#xff0c;负责Slider的背景、填充区…

数据结构1 -- leetcode练习

三. 练习 3.1 时间复杂度 用函数 f ( n ) f(n) f(n) 表示算法效率与数据规模的关系&#xff0c;假设每次解决问题需要 1 微秒&#xff08; 1 0 − 6 10^{-6} 10−6 秒&#xff09;&#xff0c;进行估算&#xff1a; 如果 f ( n ) n 2 f(n) n^2 f(n)n2 那么 1 秒能解决多…

【设计模式】装饰者模式

目录 一、定义二、结构三、优点四、使用场景五、代码示例六、截图示例 一、定义 1.在不改变现有对象结构的情况下&#xff0c;动态给该对象添加额外功能的模式 2.类B继承于类A&#xff0c;并将类A作为B类的属性&#xff08;B类聚合A类&#xff09; 3.BufferedInputStream、Buff…