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

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

 <el-table
      border
      id="tables"
      :data="dnDatas"
      show-summary
      max-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 } = param
      const 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
    },
  },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023阿里云学生服务器免费领取入口_学生认证流程

2023阿里云学生服务器价格可以免费申请&#xff0c;阿腾云分享阿里云学生服务器优惠活动入口&#xff0c;学生服务器完成学生认证领取流程&#xff0c;阿里云学生机配置为云服务器ECS、2核2G、1M带宽、40G系统盘&#xff0c;完成学生身份认证即可免费领取1台ECS&#xff0c;在云…

1.8.7 练习 冒泡排序 Bubble Sort(提取函数)

C自学精简教程 目录(必读) 1 前驱知识点 for循环语句 、 if语句、函数 、动态内存 2 排序 是将元素按照从小到大的顺序存放的方法。 一开始元素可能并不是按照从小到大的顺序存放的。 这时候我们需要找到需要调整的元素对&#xff0c;并交换这两个元素的值&#xff0c;不…

java遇到java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver该如何解决

普通的Java项目&#xff0c;利用servlet实现登录页面跳转出现下列问题。该如何解决&#xff1f;&#xff1f;&#xff1f; 首先你要先加载驱动&#xff0c;idea通过项目结构添加的依赖包是无法正常加载驱动的。我们要在 WEB-INF目录下建立lib目录在lib目录下添加MySQL驱动。

代码随想录算法训练营第31天 | ● 理论基础 ● 455.分发饼干 ● 376. 摆动序列 ● 53. 最大子序和

文章目录 前言一、理论基础二、455.分发饼干三、376. 摆动序列四、53. 最大子序和总结 前言 贪心。 一、理论基础 贪心没有套路&#xff0c;说白了就是常识性推导加上举反例。 贪心算法一般分为如下四步&#xff1a; 将问题分解为若干个子问题找出适合的贪心策略求解每一个子问…

Bigemap 在水土生态环境行业中的应用

工具 Bigemap gis office地图软件 BIGEMAP GIS Office-全能版 Bigemap APP_卫星地图APP_高清卫星地图APP 使用场景&#xff1a; 1. 土地利用占地管理&#xff1a; 核对数据&#xff0c;查看企业的实际占地是否超出宗地&#xff0c;污染面积。不方便现场勘测的地方&#xf…

2017. 网格游戏;2397. 被列覆盖的最多行数;2202. K 次操作后最大化顶端元素

2017. 网格游戏 核心思想&#xff1a;前缀和枚举。读完题后可以发现&#xff0c;第一个机器人走的路线就像一条分割线&#xff0c;第二个机器人只能获得上面白色部分或者下面白色部分的最大值。这个最大值怎么求&#xff0c;我们可以通过前缀和来求&#xff0c;然后通过枚举转…

导入excel数据给前端Echarts实现中国地图-类似热力图可视化

导入excel数据给前端Echarts实现中国地图-类似热力图可视化 程序文件&#xff1a; XinqiDaily/frontUtils-showSomeDatabaseonMapAboutChina/finalproject xin麒/XinQiUtilsOrDemo - 码云 - 开源中国 (gitee.com) https://gitee.com/flowers-bloom-is-the-sea/XinQiUtilsOr…

IDEA 报 Cannot resolve symbol ‘HttpServletResponse‘ 解决

springboot2版本换成springboot3之后&#xff0c;代码这里突然报红了&#xff0c; 首先要淡定&#xff0c;把原先Import的引入删掉&#xff0c;重新引入试试呢&#xff0c;是不是很简单哈哈。 原来&#xff0c;springboot3的路径是&#xff1a; import jakarta.servlet.http…

1773_把vim的tab键设置为4个空格显示

全部学习汇总&#xff1a; GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 有时候自己觉得自己很奇怪&#xff0c;看着Linux的命令窗口就觉得很顺眼。那些花花绿绿的字符以及繁多的方便命令工具&#xff0c;确实是比Windows强不少。不过&a…

Python学习 -- 根类object

在Python编程中&#xff0c;所有的类都继承自一个根类&#xff0c;名为object。这个根类提供了许多基本的特性和方法&#xff0c;为其他类的创建和使用提供了基础。本文将深入探讨object类&#xff0c;介绍其重要特性和用法&#xff0c;并通过代码示例进行详细解释。 1. 什么是…

C++day3(类、this指针、类中的特殊成员函数)

一、Xmind整理&#xff1a; 二、上课笔记整理&#xff1a; 1.类的应用实例 #include <iostream> using namespace std;class Person { private:string name; public:int age;int high;void set_name(string n); //在类内声明函数void show(){cout << "na…

【Linux】序列化与反序列化

目录 前言 什么是应用层&#xff1f; 再谈"协议" 什么是序列化和反序列化 网络版计算器 整体流程实现 Sock.hpp的实现 TcpServer.hpp的实现 Protocol.hpp的实现 CalServer.cc的编写 CalClient.cc的编写 整体代码 前言 本章是属于TCP/UDP四层模型中的第一层…

使用 Python编程: 下载 YouTube 音频的桌面应用程序

最近我开发了一个使用 Python 编写的桌面应用程序&#xff0c;可以方便地下载 YouTube 音频。该应用程序使用了 wxPython、yt_dlp 和 tqdm 库&#xff0c;提供了一个简单直观的用户界面&#xff0c;并具备高效的下载功能。 C:\pythoncode\new\youtube-dl-audio.py 程序介绍 …

Java实现根据关键词搜索当当商品列表数据方法,当当API接口申请指南

要通过当当网的API获取商品列表数据&#xff0c;您可以使用当当开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例&#xff0c;展示如何通过当当开放平台API获取商品列表&#xff1a; 首先&#xff0c;确保您已注册成为当当开放平台的开发者&#xff0c;并创建…

Ansible学习笔记10

1、在group1的被管理机里的mariadb里创建一个abc库&#xff1b; 1&#xff09; 然后我们到agent主机上进行检查&#xff1a; 可以看到数据库已经创建成功。 再看几个其他命令&#xff1a; #a组主机重启mysql&#xff0c;并设置开机自启 ansible a -m service -a "namemy…

Hive-启动与操作(2)

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…

初始react和使用——事件处理、样式处理和组件

一、react官网 1、官网下载 官网分别有中英文两种&#xff1a; 中文官网&#xff1a;React 官方中文文档 – 用于构建用户界面的 JavaScript 库 英文官网&#xff1a;https://reactjs.org/ 2、react简介 react是用于构建用户界面的JavaScript库&#xff0c;起源于Facebook的…

【【STM32分析IO该设置什么模式的问题】】

STM32分析IO该设置什么模式的问题 我们分析而言 我们对于PA0 的设计就从此而来 对于边沿触发的选择我们已经有所了解了 我们下拉&#xff0c;但是当我们摁下开关的时候 从0到1 导通了 所以这个是下拉 上升沿触发 而对于KEY0 我们摁下是使得电路从原来悬空高阻态到地就是0 所以…

WordPress(3)会员插件安装

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、服务器中上传插件二、使用步骤1.启动插件前言 提示:会员插件的安装不能在网站后台插件中心中直接安装原因我还没有排查 原因:会导致网站停止运行 一、服务器中上传插件 二、使用步骤 …

Servlet的使用(JavaEE初阶系列17)

目录 前言&#xff1a; 1.Servlet API的使用 1.1HttpServlet 1.2HttpServletRequest 1.3HttpServletResponse 2.表白墙的更新 2.1表白墙存在的问题 2.2前后端交互接口 2.3环境准备 2.4代码的编写 2.5数据的持久化 2.5.1引入JDBC依赖 2.5.2创建数据库 2.5.3编写数…