1.在table中添加 show-summary属性,并设置值为 true,使用 summary-method 并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中,如下代码
<el-table
:data="tableData"
border
height="200"
:summary-method="getSummaries"
show-summary = "true"
style="width: 100%; margin-top: 20px">
2.getSummaries方法逻辑
getSummaries(param,callback) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
/* const tempArr = ['ql', 'price', 'je','hjql','hjje','xj']//给需要的列加求和计算
if (tempArr.includes(column.property)) {*/
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += '';
} else {
sums[index] = '--';
}
/* }*/
/*console.log('**sums[7]****',sums[7])*/
if(sums[index] !=null && sums[index] != undefined && sums[index] != '--'){
this.$nextTick(function(){
this.bcyjje = sums[7] + sums[10]
this.zxcz = this.bcyjje - this.dqye
})
}else {
sums[index] = 0
}
return sums;
});
callback(sums)
},
注:如果最后只显示合计行,并不显示数据,一定要加callback,即可解决此问题