场景图片：
图片1：
图片2：
一：使用element中的方法
优点：
直接使用summary-method方法，直接，方便
缺点：文章来源：https://www.toymoban.com/news/detail-677301.html
只是在表格下面添加了一行，如果想有多行就不行了
1：html部分
<el-table
v-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-column
prop="expenseCategory"
label="费用类别"
min-width="100"
sortable
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="orgName"
label="运营公司"
min-width="100"
sortable
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="contractNumber"
label="合同编号"
min-width="100"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="contractName"
min-width="80"
label="合同名称"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="payee"
min-width="150"
label="收款单位或个人"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="summaryPaymentContent"
label="申请事由"
min-width="120"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="appMoney"
label="付款金额"
min-width="130"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="fundingPlan"
label="计划月份"
min-width="100"
sortable
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="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.contractSum
return;
}
else if(index===8){
sums[index] = "付款金额合计（元）："
return;
}
else if(index===9){
sums[index] =
this.heJiObj.sum==null||this.heJiObj.sum==""?""
:this.heJiObj.sum
return;
}
});
return sums
},二：自己定义
优点：
可以想表格下面添加多少行都行，
缺点：
列表的序号会一直往下走文章来源地址https://www.toymoban.com/news/detail-677301.html
1：html部分
<el-table
v-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-column
prop="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-column
prop="contractNumber"
label="合同编号"
min-width="90"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="contractName"
label="合同名称"
min-width="120"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="procingCode"
label="验工计价编号"
min-width="120"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="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-column
prop="approvalAmount"
min-width="150"
label="核准完成金额（万元）"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="nowPayPricing"
label="本次支付（万元）"
min-width="120"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="persistentDay"
label="持续时间（天）"
min-width="130"
sortable
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="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);
},到了这里，关于element-ui中的el-table的summary-method（合计）的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
