效果图:
合计行,合并前两个单元格展示合计字样,第15列展示整列合计,第16列展示此列最后一条的数据
HTML代码:
<el-table class="mar-top10" id="table" :summary-method="getSummaries" :span-method="arraySpanMethod" show-summary :data="item1.invoiceResponList" ref="table" size='mini' border style="width: 100%" highlight-current-row>
<!-- <el-table class="mar-top10" id="table" ref="table" size='mini' border style="width: 100%" highlight-current-row> -->
<el-table-column type='index' label="赔付顺序" min-width="45" align="center"></el-table-column>
<el-table-column prop="riskName" label="险种名称" min-width='90' align="center"></el-table-column>
<el-table-column prop="dutyName" label="责任名称" min-width='80' align="center"></el-table-column>
<el-table-column prop="polno" label="保单险种号" min-width='80' align="center"></el-table-column>
<el-table-column prop="amnt" label="保额" min-width='80' align="center"></el-table-column>
<el-table-column prop="beforeAmnt" label="理赔前险种剩余保额" min-width='80' align="center"></el-table-column>
<el-table-column prop="outdutytype" label="免赔类型" min-width='80' align="center"></el-table-column>
<el-table-column prop="outdutyamnt" label="免赔额" min-width='80' align="center"></el-table-column>
<el-table-column prop="beforeOutdutyamnt" label="理赔前剩余免赔额" min-width='80' align="center"></el-table-column>
<el-table-column prop="useoutdutyamnt" label="实际免赔额(分配后)" min-width='80' align="center"></el-table-column>
<el-table-column prop="outdutyrate" label="赔付比例" min-width='80' align="center"></el-table-column>
<el-table-column prop="invoiceamnt" label="发票有效金额" min-width='80' align="center"></el-table-column>
<el-table-column prop="diffInvoiceamnt" label="发票有效金额(机构差异化)" min-width='100' align="center"></el-table-column>
<el-table-column prop="standpay" label="理算金额" min-width='80' align="center"></el-table-column>
<el-table-column prop="realpay" label="赔付金额" min-width='80' align="center"></el-table-column>
<el-table-column prop="addmoney" label="发票累计赔付金额" min-width='80' align="center"></el-table-column>
<el-table-column prop="lastOutdutyamnt" label="理赔后剩余免赔额" min-width='80' align="center"></el-table-column>
<el-table-column prop="lastAmnt" label="理赔后剩余保额" min-width='80' align="center"></el-table-column>
<el-table-column prop="minMath" label="赔付公式=(min{(有效金额-实际免赔额)*赔付比例,理赔前险种剩余保额})" width='240' align="center">
<template slot-scope="scope">
<span>min{({{scope.row.invoiceamnt}}-{{scope.row.useoutdutyamnt}})*{{scope.row.outdutyrate}}%,{{scope.row.beforeAmnt}}}</span>
</template>
</el-table-column>
</el-table>
js代码:
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
this.data1.map((item,index)=> {
// console.log(index);
const tds = document.getElementsByClassName('el-table__footer')[index].getElementsByTagName('td')
tds[0].colSpan = 2;
tds[0].style.textAlign = "center";
tds[1].style.display = "none";
// console.log(tds);
})
}
getSummaries(param) {
console.log(param);
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计赔付金额';
return;
} else if (index===14) {
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] += ' ';
}
} else if (index === 15) {
const values = data.map(item => Number(item[column.property]));
sums[index] = values[values.length-1];
}
});
return sums;
},