el-table 添加合计,合计某一列

news2024/9/29 21:20:28

效果图:

 1.   使用elementui 官网上的方法

如果是只要是数值,就要合并,就只设置show-summary 即可。

  

 2.  html:

<!--cell-style 改变某一列行的背景色 -->
    <!-- tree-props 配置树形子表
    row-click: 单击事件
    highlight-current-row:高亮选中某行
    default-expand-all:默认是否展开字列表
    current-change:管理选中时触发的事件
    selection-change:多选框
    row-key="id":    id:一定要跟后台返回来的id一致,不一致,会出错
    show-summary: 显示合计
    summary-method: 合计指定的某一列
    -->
<el-table
      ref="table"
      :data="tableData"
      :height="getHeight"
      :show-summary="showSum"
      :summary-method="getSummaries"
      border
      @selection-change="handleSelectionChange"
      :key="itemKey"
      :cell-style="tableCellStyle"
      @row-click="clickRow"
      row-key="ID"
      :default-expand-all="defaultall"
      :highlight-current-row="highlightCurrent"
      @current-change="handleCurrentChangeRow"
      :tree-props="{ children: 'Children' }"
    >

      <el-table-column
        type="index"
        width="55"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        type="selection"
        v-if="isSelection"
        width="55"
      >
      </el-table-column>
      <!-- item.direction 方向,判断居中还是靠右 -->
      <template v-for="(item, index) in tableHeader">
        <!-- 1. 这是第一层 -->
        <!-- sortable: 排序 -->
        <el-table-column
          v-if="!item.child"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          header-align="center"
          :align="item.direction"
          :min-width="item.width"
          :sortable="item.sortable"
        >
        </el-table-column>
        <!-- 二级表头 -->
        <el-table-column
          v-else
          :key="index+1"
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :align="item.align || 'center'"
        >
        </el-table-column>
      </template>
      
    </el-table>

3. js :

// 合计 指定某一列添加合计

    getSummaries(param) {
      console.log(param, "heji11111");
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        } else if (column.property == "Amount") {
          //如果是经费(正常的加减法)
          const values = data.map((item) => Number(item[column.property]));
          console.log(values);
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              var sum = 0;
              if (!isNaN(value)) {
                sum = Number(Number(prev) + Number(curr)).toFixed(2);
                return sum;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += " ";
          }
        }
      });
      return sums;
    },
参考: el-table合计行合并自定义列数,单独合计某一列_刘远航,的博客-CSDN博客

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

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

相关文章

node修改版本、npm修改版本、yarn无法加载文件、node_modules\sharp: Command failed解决方法

1、node修改版本 步骤1&#xff1a;从node官网下载node压缩包或者exe文件 如果是下载的是exe文件就直接找到原来的node.exe文件替换掉就可以了&#xff0c;环境变量配置不变 如果是下载的node压缩包&#xff0c;需要解压后&#xff0c;修改本地的环境变量配置&#xff08;查看步…

微服务实例构建成 docker 镜像实例

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…

抖音seo源码部署搭建--代码分享

一、 开发环境搭建 抖音SEO源码部署环境搭建可以分为以下几个步骤&#xff1a; 安装必要的软件和工具&#xff1a;需要安装Node.js、NPM、Git等软件和工具&#xff0c;具体安装方法可以参考官方文档。 下载源码&#xff1a;从GitHub或其他源码托管平台下载抖音SEO源码。 安装…

SpringBoot 配置文件:什么时配置文件?配置文件能干什么?

文章目录 &#x1f387;前言1.配置文件的格式2. properties配置文件说明2.1 properties基本语法2.2 读取配置文件 3. yml 配置文件说明3.1 yml 基本语法 4.properties与yml 对比 &#x1f387;前言 学习一个东西&#xff0c;我们先要知道它有什么用处。整个项目中所有重要的数…

Vscode 绿色系清新主题

炎炎夏日&#xff0c;上班上的心浮气躁&#xff0c;敲代码的时候&#xff0c;只觉昏昏沉沉&#xff0c;浑浑噩噩... 给vscode换一个一个清新美好的绿色主题&#xff0c;充满活力和希望吧。 朋友们&#xff0c;收藏起来&#xff0c;每个季节换一个主题&#xff0c;打工快乐&am…

[工业互联-14]:机器人操作系统与ROS

目录 第1章 简介 第2章 历史 第3章 特点 &#xff08;1&#xff09;点对点设计 &#xff08;2&#xff09;不依赖编程语言 &#xff08;3&#xff09;精简与集成 &#xff08;4&#xff09;便于测试 &#xff08;5&#xff09;开源 &#xff08;6&#xff09;强大的库及…

LVS-DR负载群集的优势和部署实例

目录 一、DR模式数据包流向分析 二、DR模式的特点 三、DR模式中需要解决的问题 四、LVS-DR部署实例 1.配置NFS共享存储器 2.配置节点web服务&#xff08;两台的配置相同&#xff09; 3.配置LVS负载调度器 一、DR模式数据包流向分析 1.Client 客户端发送请求到 Director …

OpenCV库实现了一个简单的图像放缩工具

这里是详细的代码解析: #include <opencv2/opencv.hpp> // 引入OpenCV主要库。 #include <opencv2/highgui/highgui.hpp> // 引入高级GUI模块,它包含用于显示图像和获取用户输入的函数。 #include <opencv2/imgproc/imgproc.hpp> // 引入图像处理模块,它…

mysql数据类型char和varchar的区别

&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389;&#x1f389;&#x1f389;&#x1f389;&…

如何将Windows的文件存储到铁威马NAS里?

总是能听到小伙伴问&#xff0c;有没有办法可以省去登入TOS的操作就可以直接存取铁威马NAS上的文件及资料呢&#xff1f;很简单&#xff0c;其实只要将NAS的共享文件夹映射到Windows的网络驱动器&#xff0c;就饿可以让我们节省登入TOS的操作直接存取TNAS的文件&#xff0c;编辑…

如何打造工程师文化?

目录 一、打造工程师文化的步骤&#xff1a;二、成功案例&#xff1a;三、失败案例及教训&#xff1a; 打造工程师文化是一个复杂而又关键的任务&#xff0c;它需要公司在组织结构、价值观、领导风格以及员工福利等方面做出全面的调整。下面是一个针对打造工程师文化的详细步骤…

[mj_robot_sim]多关节机器人仿真软件介绍

全称&#xff1a;Multi-Joints Robot Simulator 代码地址&#xff1a;https://github.com/Jelatine/mj_robot_sim 设计目的 个人学习opengl的技术落地尝试设计一个跨平台、轻量级的机器人仿真软件&#xff0c;方便调试机器人 特性 轻量级&#xff0c;接口简单易用跨平台&…

管理类联考——逻辑——技巧篇——形式逻辑的三大理论基石

&#x1f3e0;个人主页&#xff1a;fo安方的博客✨ &#x1f482;个人简历&#xff1a;大家好&#xff0c;我是fo安方&#xff0c;考取过HCIE Cloud Computing、CCIE Security、CISP、RHCE、CCNP RS、PEST 3等证书。&#x1f433; &#x1f495;兴趣爱好&#xff1a;b站天天刷&…

​LeetCode解法汇总445. 两数相加 II

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每…

[RocketMQ] Broker asyncPutMessage处理消息以及存储的高性能设计措施 (十一)

asyncPutMessage方法真正的用来存储消息。 文章目录 1.asyncPutMessage存储普通消息1.1 checkStoreStatus检查存储状态1.2 checkMessage检查消息 2.CommitLog#asyncPutMessage异步存储消息2.1 处理延迟消息2.2 获取最新mappedFile2.2.1 tryCreateMappedFile创建新的MappedFile2…

使用凌鲨进行数据标注

在AI研发团队中&#xff0c;数据的数量和质量通常比算法本身更重要。为了获得大量高质量的数据&#xff0c;标注软件是必不可少的。目前许多开源标注软件在权限、任务管理和审核方面都存在较大问题。 在凌鲨(linksaas)0.3.8版本中增加了数据标注功能&#xff0c;支持 音频分类…

基于matlab使用车载激光雷达数据在惯性测量单元读数帮助下构建地图(附源码)

一、前言 此示例演示如何处理来自安装在车辆上的传感器的 3-D 激光雷达数据&#xff0c;以便在惯性测量单元 &#xff08;IMU&#xff09; 读数的帮助下逐步构建地图。这样的地图可以促进车辆导航的路径规划&#xff0c;也可以用于定位。为了评估生成的地图&#xff0c;此示例…

国内环境安装Atlas OS步骤与网络问题解决

国内环境安装Atlas OS步骤与网络问题解决 Atlas 是一个开源、透明的项目&#xff0c;它修改了 Windows&#xff0c;并消除了影响游戏性能的所有负面缺点。我们是减少系统延迟、网络延迟、输入延迟和保持系统私密性的绝佳选择&#xff0c;同时仍然关注性能。我不久前在安装时遇…

【论文基本功】【LaTeX】参考文献中常见属性的用法及特点(bib文件)【IEEE论文】

【论文基本功】【LaTeX】参考文献中常见属性的用法及特点&#xff08;bib文件&#xff09;【IEEE论文】 一、author&#xff08;作者&#xff09;1. 使用方法用法1&#xff1a;作者名字的两种写法用法2&#xff1a;使用and连接不同作者姓名用法3&#xff1a;超过3个作者时如何使…

Excel如何在运算中过滤重复数据?

来百度APP畅享高清图片 问题&#xff1a;两个对比表格内的数据实际是有重复的但是不是完全重复&#xff0c;比如a-b 和b-a 只是顺序换了但是条件格式就无法筛选了&#xff0c;只能筛选出a-b a-b 的相同数据。 需求&#xff1a;要筛选出a-b a-b b-a的重复数据&#xff0c;或者把…