el-table表格最后一列合计总分(可自定义某列的合计)
前情提要:主要用到以下截图内容
1.效果
2.最后两列的计算比较特殊,上代码
<el-table
v-loading="tableLoading"
:summary-method="getSummaries" // 必须项1
show-summary // 必须项2,目的是在尾部展示合计列
:data="tableList">
</el-table>
methods:{
getSummaries (param) {
console.log(param, '参数')
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
console.log(column, index)
if (index === 0) { // 其他列
sums[index] = '合计/总分';
return;
}
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] = 'N/A';
}
if (index === 5) { // 个人得分率
var num = (sums[2] / sums[1]) * 100;
if (!num == 0) {
num = num.toFixed(2);
sums[index] = num;
} else {
sums[index] = "0";
}
}
if (index === 6) { // 平均得分率
var number = (sums[3] / sums[1]) * 100;
if (!number == 0) {
number = number.toFixed(2);
sums[index] = number;
} else {
sums[index] = "0";
}
}
})
return sums;
},
}