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