当前位置: 首页 > news >正文

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},},

相关文章:

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

效果如图 1.element-ui的table表格有合计功能&#xff0c;但是功能却不完善&#xff0c;会有不显示和计算出现错误的问题&#xff0c;项目中有遇到&#xff0c;所以记录下 show-summary&#xff1a;自动合计 getSummaries&#xff08;&#xff09;&#xff1a;对合计行进行特…...

uview ui 1.x ActonSheet项太多,设置滚动(亲测有效)

问题&#xff1a;ActionSheet滚动不了。 使用uview ui &#xff1a;u-action-sheet, 但是item太多&#xff0c;超出屏幕了&#xff0c; 查了一下文档&#xff0c;并没有设置滚动的地方。 官方文档&#xff1a;ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-a…...

STM32 Cubemx 同名外设中断及回调

文章目录 前言示例工程个人理解 前言 最近在学习STM32&#xff0c;采用HAL库开发方式。记录一下同名外设中断及回调。 这里提及的同名外设指USART1/2之类的相同外设&#xff0c;但不是同一个instance。 示例工程 以使用cubemx配置两个同名外设EXTI0/EXT4为例。 在NVIC配置…...

储能辅助电力系统调峰的容量需求研究(matlab代码)

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考文献《储能辅助电力系统调峰的容量需求研究》&#xff0c;是一个很常规很经典的matlab优化代码&#xff0c;主要是对火电、风电和储能等电力设备主体进行优化调度&#xff0c;在调峰能力达不到时采…...

非计算机科班如何丝滑转码?(本人就是有点不丝滑)

我觉得无非三个办法可以选择(当然可能有其他方法) 自学 报班 有师傅带 但是在学习之前&#xff0c;你一定要明确你学习编程的目的是什么&#xff01; 游戏开发&#xff1f;后台研发&#xff1f;爬虫工程师&#xff1f;前端程序员?数据分析师&#xff1f; 或者 仅仅是想做一…...

tensorrtx部署yolov5 6.0

文章目录 一. yolov5 v6.0训练模型二.训练好的yolov5模型转tensorrt引擎 一. yolov5 v6.0训练模型 官网下载yolov5 v6.0代码 下载官方预训练好的模型 安装yolov5所需要的库文件&#xff0c;requirements.txt在下载好的yolov5源代码中有 pip install -r C:\Users\10001540…...

用html5写一个音乐播放器

在HTML5中创建一个简单的音乐播放器时&#xff0c;你可以使用<audio>元素来实现。以下是一个基本的示例&#xff1a; html <!DOCTYPE html> <html> <head> <title>音乐播放器</title> </head> <body> <h1>音乐…...

postgresql类型转换函数

postgresql类型转换函数 简介CAST 函数to_date 函数to_timestamp 函数to_char 函数to_number 函数隐式类型转换 简介 类型转换函数用于将数据从一种类型转换为另一种类型。 CAST 函数 CAST ( expr AS data_type )函数用于将 expr 转换为 data_type 数据类型&#xff1b;Post…...

Go 自学:Array阵列

以下代码展示了用两种方法建立array。 package mainimport "fmt"func main() {var fruitList [4]stringfruitList[0] "Apple"fruitList[1] "Tomato"fruitList[3] "Peach"fmt.Println("Fruit list is: ", fruitList)fmt.…...

大数据平台与数据仓库的五大区别

随着大数据的快速发展&#xff0c;很多人难以区分大数据平台与数据仓库的区别&#xff0c;两者傻傻分不清楚。今天我们小编就给大家汇总了大数据平台与数据仓库的五大区别&#xff0c;希望有用哦&#xff01;仅供参考&#xff01; 大数据平台与数据仓库的五大区别 一、概念不同…...

React 钩子汇总

React 钩子 一、常用的 React 钩子&#xff1a; 1. useState 用于在函数式组件中添加状态管理。它返回一个状态值和一个更新状态的函数&#xff0c;让你可以在组件中追踪和更新状态。 2. useEffect 用于在组件渲染完成后执行副作用操作&#xff0c;比如数据获取、订阅等。…...

Python爬取旅游网站数据机票酒店价格对比分析

本文将介绍如何使用Python爬虫从旅游网站上获取机票和酒店的价格数据&#xff0c;并实现价格对比分析&#xff0c;帮助你做出明智的旅行决策。我们提供了完善的方案和代码&#xff0c;让你能够轻松操作并获得实际价值。 使用Python爬虫获取旅游网站上的机票和酒店价格数据&…...

OA项目之会议通知(查询是否参会反馈详情)

目录 会议查询 是否参会 反馈详情 讲解思路 会议通知SQL语句分析 反馈详情SQL语句分析 后台代码编写 前端代码编写 效果预览 会议查询 MeetingFeedBack.java package com.zking.oa.model;import org.lisen.mvc.util.AutoIncrement; import org.lisen.mvc.util.…...

如何维护自己的电脑的措施

维护自己的电脑可以采取以下措施&#xff1a; 硬件维护&#xff1a;定期清理电脑表面的灰尘和污垢&#xff0c;避免灰尘对电脑内部部件造成影响。电源插座要保持接触良好&#xff0c;保证电脑的电源稳定。如果使用笔记本电脑&#xff0c;要注意保证散热通畅&#xff0c;避免电…...

VS2022 Community 安装步骤

VS2022 Community 安装步骤&#xff08;C语言学习&#xff09; 1. 下载地址2. 安装步骤 1. 下载地址 链接: VS2022 Community下载地址 2. 安装步骤 双击图标进行安装。 点击【继续】后等待安装。 选择需要的安装包并修改安装位置&#xff0c;然后点击【安装】。 点击安装…...

vue3中mitt.js使用

在vue2中我们通过事件总线eventbus,来实现两个平行组件之间的通信&#xff1a; bus.js import Vue from vue // 创建vue实例 const Bus new Vue() export default Bus在具体的组件中&#xff1a; A.vue import Bus from ./bus.js // 发布一个事件 Bus.$emit(sendData, {nam…...

Redis 内存淘汰策略详解

Redis 内存淘汰策略详解 一、简介Redis内存管理问题 二、内存淘汰策略1.为什么需要内存淘汰策略2.内存淘汰策略分类&#xff08;1&#xff09;noeviction&#xff08;2&#xff09;allkeys-lru&#xff08;3&#xff09;allkeys-lfu&#xff08;4&#xff09;volatile-lru&…...

初识Redis之分布式

一.简单介绍: Redis是用来在内存中, 存储数据的, 他的初心是用来搞消息中间件(或者说消息队列 很熟悉了吧~~),但是呢用的不多,他现在主要是用来做 数据库,缓存 用来存储数据, 为什么不直接存储呢? Redis的优势就在于分布式系统 二.分布式系统 要说其分布式系统,简单想想都能…...

计算机网络-笔记-第三章-数据链路层

目录 三、第三章——数据链路层 1、数据链路层概述&#xff08;帧&#xff09; &#xff08;1&#xff09;封装成帧、差错检测、可靠传输&#xff08;简单介绍&#xff09; &#xff08;2&#xff09;CSMA/CD 2、封装成帧 &#xff08;1&#xff09;透明传输&#xff08;…...

【1】openGL glew示例代码分析绘制一个三角形

openGL文档 > docs.gl &#xff0c;可以直接查询函数的定义和使用 #include <iostream> #include <string> #include <GL/glew.h> #include <GLFW/glfw3.h>int main(void) {GLFWwindow* window;/* Initialize the library */if (!glfwInit())retu…...

InvokeAI工具函数库:10个核心工具方法与实用辅助函数详解

InvokeAI工具函数库&#xff1a;10个核心工具方法与实用辅助函数详解 【免费下载链接】InvokeAI Invoke is a leading creative engine for Stable Diffusion models, empowering professionals, artists, and enthusiasts to generate and create visual media using the late…...

Pixel Epic效果实测:不同逻辑发散概率下技术路线图描述准确率对比

Pixel Epic效果实测&#xff1a;不同逻辑发散概率下技术路线图描述准确率对比 1. 测试背景与目的 Pixel Epic作为一款创新型研究报告辅助工具&#xff0c;其核心功能"贤者之智"模块采用了独特的逻辑发散机制。本次测试旨在评估不同逻辑发散概率设置对技术路线图描述…...

Pixel Couplet Gen实操手册:微信小程序分包加载优化像素春联H5首屏速度

Pixel Couplet Gen实操手册&#xff1a;微信小程序分包加载优化像素春联H5首屏速度 1. 项目背景与核心价值 Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的创新应用。通过ModelScope大模型的文本生成能力&#xff0c;结合精心设计的8-bit视觉元素&#xff0c;…...

OpenClaw(首选,全能执行) - 支持平台:**WhatsApp、Telegram、微信、企业微信、飞书、Slack、Discord**等15+平台

一、自动处理邮件的AI&#xff08;过滤、归档、代发、总结&#xff09; 1. OpenClaw&#xff08;全能型&#xff0c;本地多平台&#xff09; 核心能力&#xff1a;垃圾邮件过滤、自动归档、按规则分类、提取待办、代发模板邮件、批量退订、邮件摘要。优势&#xff1a;本地部署、…...

AI模型评估指标:InstantID在各项基准测试中的表现

AI模型评估指标&#xff1a;InstantID在各项基准测试中的表现 【免费下载链接】InstantID 项目地址: https://ai.gitcode.com/hf_mirrors/InstantX/InstantID InstantID作为一款领先的AI模型&#xff0c;在多项基准测试中展现出卓越性能。本文将深入解析其在各项评估指…...

实战指南:利用快马ai为django项目生成开箱即用的vscode python开发环境

作为一个长期使用Python开发Django项目的程序员&#xff0c;我深知配置开发环境是个既基础又容易踩坑的环节。最近尝试用InsCode(快马)平台生成配置方案&#xff0c;发现能省去大量重复劳动。下面分享我的实战经验&#xff1a; 项目结构规范化 平台生成的Django项目骨架严格遵循…...

F5 big IP DNS 导出cname txt记录

DNS上的A记录配置与cname不在同一文件中 cname和txt这一类的在下面这个目录 /var/named/config/namedb可以通过winscp连接DNS后&#xff0c;找到这个目录&#xff0c;里面的所有文件即是&#xff0c;之所以有多个文件&#xff0c;是因为每1个权威域都对应1个独立文件...

SSD用久了为啥会变慢?深入NAND Flash的‘写放大’与‘磨损均衡’,教你看懂SMART数据避坑

SSD性能下降的真相&#xff1a;从写放大到磨损均衡的深度解析 你是否遇到过这样的困扰——新买的SSD速度飞快&#xff0c;但用了一段时间后&#xff0c;系统响应明显变慢&#xff0c;开机时间延长&#xff0c;文件传输速度大不如前&#xff1f;这种现象并非偶然&#xff0c;而是…...

APRSPacketLib:嵌入式C库实现APRS协议编解码

1. APRSPacketLib 项目概述 APRSPacketLib 是一个专为业余无线电&#xff08;Ham Radio&#xff09;领域设计的轻量级嵌入式 C 语言库&#xff0c;核心目标是 在资源受限的微控制器平台上高效完成 APRS&#xff08;Automatic Packet Reporting System&#xff09;协议数据包的…...

如何解决Tokio项目中Windows平台TCP性能问题的完整指南

如何解决Tokio项目中Windows平台TCP性能问题的完整指南 【免费下载链接】tokio A runtime for writing reliable asynchronous applications with Rust. Provides I/O, networking, scheduling, timers, ... 项目地址: https://gitcode.com/GitHub_Trending/to/tokio To…...