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.hqwc.cn/news/87190.html

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

相关文章

关于单例模式

单例模式的目的&#xff1a; 单例模式的目的和其他的设计模式的目的都是一样的&#xff0c;都是为了降低对象之间的耦合性&#xff0c;增加代码的可复用性&#xff0c;可维护性和可扩展性。 单例模式&#xff1a; 单例模式是一种常用的设计模式&#xff0c;用简单的言语说&am…

合宙Air724UG LuatOS-Air LVGL API控件--按钮 (Button)

按钮 (Button) 按钮控件&#xff0c;这个就不用多说了&#xff0c;界面的基础控件之一。 示例代码 – 按键回调函数 event_handler function(obj, event) if event lvgl.EVENT_CLICKED then print(“Clicked\n”) elseif event lvgl.EVENT_VALUE_CHANGED then print(“To…

上海亚商投顾:创业板指反弹大涨1.26% 核污染概念股午后全线走强

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 市场情绪 三大指数今日集体反弹&#xff0c;沪指午后冲高回落&#xff0c;创业板指盘中涨超2%&#xff0c;尾盘涨幅也有所收…

3D模型转换工具HOOPS Exchange助力打造虚拟现实应用程序

挑战&#xff1a; 支持使用各种 CAD 系统和 CAD 文件格式的客户群向可视化硬件提供快速、准确的数据加载提供对详细模型信息的访问&#xff0c;同时确保高帧率性能 解决方案&#xff1a; HOOPS Exchange领先的CAD数据转换工具包 结果&#xff1a; 确保支持来自领先工程软件…

微服务中间件--MQ服务异步通信

MQ服务异步通信 MQ服务异步通信a.消息可靠性1) 生产者消息确认2) 消息持久化3) 消费者消息确认4) 消费者失败重试4.a) 本地重试4.b) 失败策略 b.死信交换机1) 初识死信交换机2) TTL3) 延迟队列a) 安装延迟队列插件b) SpringAMQP使用延迟队列插件 c.惰性队列1) 消息堆积问题2) 惰…

【FreeRTOS】【STM32】中断详细介绍

文章目录 一、三种优先级的概念辨析1. 先理清楚两个概念&#xff1a;CPU 和 MPU2. Cortex-M3 内核与 STM32F1XX 控制器有什么关系3. 优先级的概念辨析① Cortex-M3 内核和 STM32F1XX 的中断优先级② FreeRTOS 的任务的优先级 二、 Cortex-M3 内核的中断优先级1. 中断编号2. 优先…

Arcgis colorRmap

arcgis中colorRmap对应的名称&#xff1a; 信息来源&#xff1a;https://developers.arcgis.com/documentation/common-data-types/raster-function-objects.htm 在arcpy中使用方法&#xff1a; import arcpy cr arcpy.mp.ColorRamp("Yellow to Red")python中 ma…

06.DenseCap

目录 前言泛读摘要IntroductionRelated Work小结 精读模型模型构架全卷积定位层卷积锚点边界回归边界采样双线性插值 识别网络RNN 损失函数训练与优化 实验数据集&#xff0c;预处理DenseCap评价标准基线区域和图像级统计之间的差异RPN vs EdgeBoxesQualitative results 区域ca…

java: 无法访问org.springframework.boot.SpringApplication 错误的类文件

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 错误1&#xff1a; java: 无法访问org.springframework.boot.SpringApplication 错误的类文件: /D:/Software/env-java/apache-maven-3.6.1/repository/org/springframework/boot/spring-boot/3.1.2/sp…

基于DolphinScheduler的调度流程梳理及落地实践

目 录 01 背景‍ 02 主流调度引擎 ‍‍‍‍‍‍‍ 03 DolphinScheduler核心概念及调度过程‍‍‍‍‍‍ 04 开发实践 01‍ 背景‍‍ 随着数据中台概念及相关技术逐渐成熟、落地&#xff0c;不断有企业将其应用到自身业务中&#xff0c;将原本分散的各系统数据进行整合、分析…

数据结构(Java实现)-ArrayList与顺序表

什么是List List是一个接口&#xff0c;继承自Collection。 List的使用 List是个接口&#xff0c;并不能直接用来实例化。 如果要使用&#xff0c;必须去实例化List的实现类。在集合框架中&#xff0c;ArrayList和LinkedList都实现了List接口。 线性表 线性表&#xff08;lin…

Linux学习之DNS服务的原理

DNS服务一些理论 域名系统&#xff08;Domain Name System&#xff0c;DNS&#xff09;是互联网的核心应用服务&#xff0c;可以通过IP地址查询到域名&#xff0c;也可以通过域名查询到IP地址。 FQDN&#xff08;Full Qualified Domain Name&#xff09;是完全限定域名&#xf…