element-ui中的el-table的summary-method(合计)的使用

场景图片:

图片1:

图片2:


 一:使用element中的方法

优点:

        直接使用summary-method方法,直接,方便

缺点:

        只是在表格下面添加了一行,如果想有多行就不行了

1:html部分

<el-tablev-loading="loading":data="tableData":border="true"style="width: 100%;":header-cell-style="{textAlign:'center'}":cell-style="{textAlign:'center'}"show-summary:summary-method="tableHeJi":default-sort = "{prop: 'date', order: 'descending'}"><el-table-columnprop="expenseCategory"label="费用类别"min-width="100"sortable:show-overflow-tooltip="true"></el-table-column><el-table-columnprop="orgName"label="运营公司"min-width="100"sortable:show-overflow-tooltip="true"></el-table-column><el-table-columnprop="contractNumber"label="合同编号"min-width="100":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="contractName"min-width="80"label="合同名称":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="payee"min-width="150"label="收款单位或个人":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="summaryPaymentContent"label="申请事由"min-width="120":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="appMoney"label="付款金额"min-width="130":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="fundingPlan"label="计划月份"min-width="100"sortable:show-overflow-tooltip="true"></el-table-column><el-table-columnprop="payStatus"label="审批状态"min-width="80":show-overflow-tooltip="true"></el-table-column></el-table>

2:js方法

tableHeJi(val){const { columns, row } = val;const sums = [];columns.forEach((item, index) => {if (index === 0) {sums[index] = '总计';return;}else if(index===4){sums[index] = "合同数量:"return;}else if(index===5){sums[index] = this.heJiObj.contractSum==null||this.heJiObj.contractSum==""?"":this.heJiObj.contractSumreturn;}else if(index===8){sums[index] = "付款金额合计(元):"return;}else if(index===9){sums[index] = this.heJiObj.sum==null||this.heJiObj.sum==""?"":this.heJiObj.sumreturn;}});return sums},

二:自己定义

优点:

         可以想表格下面添加多少行都行,

缺点:

        列表的序号会一直往下走

 1:html部分

<el-tablev-loading="loading":data="tableData":span-method="objectSpanMethod":border="true"style="width: 100%;":header-cell-style="{textAlign:'center'}":cell-style="{textAlign:'center'}":default-sort = "{prop: 'date', order: 'descending'}"><el-table-column fixed type="index" label="序号" width="50"><template slot-scope="scope"><div>{{scope.$index+(formData.page-1)*formData.rows+1}}</div></template></el-table-column><el-table-columnprop="lineName"label="线路"min-width="120"sortable:show-overflow-tooltip="true"><template slot-scope="scope"><div class="absoluteDot" v-if="scope.row.addRow=='1'"><div class="relative"><div class="absolute flex-center H50"><div class="">施工单位签名:</div> <div class=""><img src="" style="width:120px;height: 30px;background:rgba(118, 222, 107, 0.577); "></div></div></div></div><div class="absoluteDot" v-if="scope.row.addRow=='2'"><div class="relative"><div class="absolute">意见:{{ msg1 }}</div></div></div><div class="absoluteDot" v-if="scope.row.addRow=='5'"><div class="relative"><div class="absolute flex-center H50"><div class="">单位领导签名:</div> <div class=""><img src="" style="width:120px;height: 30px;background:rgba(118, 222, 107, 0.577); "></div></div></div></div><div class="absoluteDot" v-if="scope.row.addRow=='6'"><div class="relative"><div class="absolute">意见:{{ msg2 }}</div></div></div><div v-else>{{scope.row.lineName}}</div></template></el-table-column><el-table-columnprop="contractNumber"label="合同编号"min-width="90":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="contractName"label="合同名称"min-width="120":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="procingCode"label="验工计价编号"min-width="120":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="pricingDate"min-width="80"label="验工年月":show-overflow-tooltip="true"><template slot-scope="scope"><div class="absoluteDot" v-if="scope.row.addRow=='1'"><div class="relative"><div class="absolute flex-center H50"><div class="">经理签名:</div> <div class=""><img src="" style="width:120px;height: 30px;background:rgba(118, 222, 107, 0.577); "></div></div></div></div><div class="absoluteDot" v-if="scope.row.addRow=='2'"><div class="relative"><div class="absolute">意见:{{ msg3 }}</div></div></div><div class="absoluteDot" v-if="scope.row.addRow=='5'"><div class="relative"><div class="absolute flex-center H50"><div class="">董事长签名:</div> <div class=""><img src="" style="width:120px;height: 30px;background:rgba(118, 222, 107, 0.577); "></div></div></div></div><div class="absoluteDot" v-if="scope.row.addRow=='6'"><div class="relative"><div class="absolute">意见:{{ msg4 }}</div></div></div><div v-else>{{scope.row.pricingDate}}</div></template></el-table-column><el-table-columnprop="approvalAmount"min-width="150"label="核准完成金额(万元)":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="nowPayPricing"label="本次支付(万元)"min-width="120":show-overflow-tooltip="true"></el-table-column><el-table-columnprop="persistentDay"label="持续时间(天)"min-width="130"sortable:show-overflow-tooltip="true"></el-table-column><el-table-columnprop="nowNode"label="当前处理节点"min-width="100":show-overflow-tooltip="true"></el-table-column></el-table>

2:css部分

.absoluteDot{position: absolute;left: 10px;top: 0px;width: 0px;height: 0px;}.relative{position: relative;left: 0px;top: 0px;z-index: 100;}.absolute{/* border: 1px solid #fc7f7f; */position: absolute;left: 0px;top: 0px;width: 230px;white-space:break-spaces;text-align: left;}.H50{height: 50px;}

3:js部分

// 获取列表的初始化数据getTableData(){this.loading=true;tableList(this.formData).then(res=>{this.loading=false;if(res.code==0){this.tableData=res.data.list;this.tableAdd();//想表格中添加行的方法}})},tableAdd(){let totalTable1={};totalTable1.addRow="1"this.tableData.push(totalTable1);let totalTable2={};totalTable2.addRow="2"this.tableData.push(totalTable2);let totalTable3={};totalTable3.addRow="3"this.tableData.push(totalTable3);let totalTable4={};totalTable4.addRow="4"this.tableData.push(totalTable4);let totalTable5={};totalTable5.addRow="5"this.tableData.push(totalTable5);let totalTable6={};totalTable6.addRow="6"this.tableData.push(totalTable6);let totalTable7={};totalTable7.addRow="7"this.tableData.push(totalTable7);let totalTable8={};totalTable8.addRow="8"this.tableData.push(totalTable8);},

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

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

相关文章

一、MQ的基本概念

1、初识MQ MQ全称是Message Queue&#xff0c;消息队列&#xff0c;多用于系统之间进行异步通信。队列的概念数据结构中有详细介绍过&#xff0c;先进先出&#xff0c;消息队列就是存储消息的数据结构。 同步调用和异步调用两者之间的区别&#xff1a; 同步调用&#xff1a;发…

opencv-dnn

# utils_words.txt 标签文件 import osimage_types (".jpg", ".jpeg", ".png", ".bmp", ".tif", ".tiff")def list_images(basePath, containsNone):# return the set of files that are validreturn list_file…

gdb 条件断点

条件断点&#xff0c;顾名思义就是有条件才会触发的断点&#xff0c;一般设置此类断点形如&#xff1a;b xxx if xxx&#xff0c;如&#xff1a; 要触发此断点则需要 is_created 0。打完断点我们也可以用 info b 查看一下当前已经设置的断点信息&#xff0c;如&#xff1a; 断…

【JavaSE】接口

文章目录 接口的概念接口的使用接口的特性实现多个接口接口间的继承抽象类和接口的区别 接口的概念 接口就是公共的行为规范标准&#xff0c;大家在实现时&#xff0c;只要符合规范标准&#xff0c;就可以通用。在Java中&#xff0c;接口可以看成是&#xff1a;多个类的公共规…

Spring核心配置步骤-完全基于XML的配置

Spring框架的核心配置涉及多个方面&#xff0c;包括依赖注入&#xff08;DI&#xff09;、面向切面编程&#xff08;AOP&#xff09;等。以下是一般情况下配置Spring应用程序的核心步骤&#xff1a; 1. **引入Spring依赖&#xff1a;** 在项目的构建工具&#xff08;如Maven、…

23 WEB漏洞-文件上传之解析漏洞编辑器安全

目录 几种中间件解析漏洞简要演示几种常见WEB编辑器简要演示几种常见CMS文件上传简要演示贴近实际应用下的以上知识点演示 各个WEB编辑器安全讲解 https://navisec.it/编辑器漏洞手册/ 各个CMS文件上传简要讲解 wordpress&#xff0c;phpcms&#xff0c; 几种中间件解析漏洞简…

JDK 新版本中都有哪些新特性?

面试回答 JDK 8 推出了 Lambda 表达式、Stream、Optional、新的日期 API 等 JDK 9 中推出了模块化 JDK 10 中推出了本地变量类型推断 JDK 12 中增加了 switch 表达式 JDK 13 中增加了 text block JDK 14 中增加了 Records JDK 15 中增加了封闭类 JDK 17 中扩展了 switch…

探索未知世界:桌面端3D GIS引领地理信息新时代

近年来&#xff0c;桌面端的三维地理信息系统&#xff08;3D GIS&#xff09;在地理信息领域迎来了显著的发展&#xff0c;为我们带来了更深入、更丰富的地理空间认知和数据分析体验。从城市规划到环境保护&#xff0c;从资源管理到应急响应&#xff0c;桌面端的3D GIS正逐渐成…

Mysql定时备份事件

创建了一个名为backup_database的定时任务&#xff0c;每天自动在当前时间的后一天开始执行。备份数据库的代码使用mysqldump命令将数据库导出为sql文件保存在指定的备份目录中。 需要注意的是&#xff0c;上述代码中的用户名 (username)、密码 (password)、主机名 (hostname) …

Java程序设计——在一个给定的字符串中查找并解析姓名、出生日期、个人网站、身高和体重信息,并输出相应的结果

package ch4;public class FindMess {public static void main(String[] args) {String mess "姓名:张三 出生时间:1989.10.16。个人网站:http://www.zhang.com。身高:185 cm,体重:72 kg";int index (int)(mess.indexOf(":")); //mess调用indexOf(Stri…

如何解决跨域问题

跨域问题是指在浏览器中发起跨域请求时&#xff0c;由于浏览器的同源策略限制&#xff0c;导致请求被拒绝或无法正常发送和接收数据。同源策略要求两个页面具有相同的协议、域名和端口号&#xff0c;否则就会出现跨域问题。 为了解决跨域问题&#xff0c;可以采取以下方法之一…

git Update failed cannot lock ref

报错详情 解决方案 百度了很多方案&#xff0c;过滤出了有效方案 去该项目下的.git文件里找到报错文件&#xff0c;本例中即为&#xff1a;.git/refs/tags/pre-RELEASE-PRE-20230817-03 删除该文件&#xff0c;重新pull&#xff0c;pull成功问题解决

Java并发工具类

JDK并发包中常用并发工具类&#xff1a; CountDownLatch、CyclicBarrier和Semaphore工具类提供了一种并发流程控制的手段&#xff1b; Exchanger工具类则提供了在线程间交换数据的一种手段。 等待多线程完成的CountDownLatch CountDownLatch允许一个或多个线程等待其他线程完成…

Electron学习3 使用serialport操作串口

Electron学习3 使用serialport操作串口 一、准备工作二、 SerialPort 介绍1. 核心软件包(1) serialport(2) serialport/stream(3) serialport/bindings-cpp(4) serialport/binding-mock(5) serialport/bindings-interface 2. 解析器包3. 命令行工具 三、创建一个demo程序1. 创建…

NOI2015D. 荷马史诗

荷马史诗 题目描述 追逐影子的人&#xff0c;自己就是影子。 ——荷马 Allison 最近迷上了文学。她喜欢在一个慵懒的午后&#xff0c;细细地品上一杯卡布奇诺&#xff0c;静静地阅读她爱不释手的《荷马史诗》。但是由《奥德赛》和《伊利亚特》组成的鸿篇巨制《荷马史诗》实在是…

Dapper

介绍 dapper是一款轻量级的ORM Dapper 被称为 ORM 之王。 以下是 Dapper 的主要功能&#xff1a; 速度快&#xff0c;性能快。 更少的代码行。 对象映射器。 静态对象绑定。 动态对象绑定。 轻松处理 SQL 查询。 易于处理存储过程。 直接对 IDBConnection 类进行操作&#xf…

重注微电子产业,“三大齿轮”能否带起香港经济的“第三轮”

文 | 智能相对论 作者 | 佘凯文 众所周知&#xff0c;微电子产业早已成为现代科技领域的关键钥匙&#xff0c;谁能掌握微电子产业&#xff0c;谁就能拥有全球科技领域的话语权。 从上世纪开始&#xff0c;微电子产业曾经历过几次重大转移&#xff0c;如70年代从美国转向日本…

零拷贝技术详解

当涉及到网络编程和IO操作时&#xff0c;数据拷贝是一个常见的性能瓶颈。传统的数据拷贝过程中&#xff0c;数据需要从内核缓冲区复制到用户空间缓冲区&#xff0c;然后再从用户空间缓冲区复制到内核缓冲区&#xff0c;这个过程会耗费大量的CPU时间和内存带宽&#xff0c;降低系…

tensorRT安装

官方指导文档&#xff1a;Installation Guide :: NVIDIA Deep Learning TensorRT Documentation 适配很重要&#xff01;&#xff01;&#xff01;&#xff01; 需要cuda, cuDNN, tensorRT三者匹配。我的cuda11.3 所以对应的cuDNN和tensorRT下载的是如下版本&#xff1a; cud…

【业务功能篇77】微服务-OSS对象存储-上传下载图片

3. 图片管理 文件存储的几种方式 单体架构可以直接把图片存储在服务器中 但是在分布式环境下面直接存储在WEB服务器中的方式就不可取了&#xff0c;这时我们需要搭建独立的文件存储服务器。 3.1 开通阿里云服务 针对本系统中的相关的文件&#xff0c;图片&#xff0c;文本等…