需求描述
末尾合计行的需求如下:
- 第1列显示“合计”
- 无法求和的列,显示“——”
- 可以求和的列,显示求和结果,并添加对应的单位
- 命中率列的合计逻辑为 : 总命中数/总射击次数
代码实现
要点详见代码中的备注
<template>
<div class="tableBox">
<el-table
:data="tableData"
border
:summary-method="getSummaries"
show-summary
>
<el-table-column prop="id" label="序号" width="180" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="total" label="射击次数" align="center">
</el-table-column>
<el-table-column prop="hitNum" label="命中次数" align="center">
</el-table-column>
<el-table-column prop="hitRate" label="命中率" align="center">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "1",
name: "张三",
total: 100,
hitNum: 10,
hitRate: "10%",
},
{
id: "2",
name: "王五",
total: 100,
hitNum: 20,
hitRate: "20%",
},
],
};
},
methods: {
getSummaries(param) {
const {
columns, data } = param;
const sumDic = {
};
columns.forEach((column, index) => {
// 第 1 列
if (index === 0) {
sumDic[column.property] = "合计";
return;
}
// 需特殊计算的列
if (column.property === "hitRate") {
sumDic[column.property] =
((sumDic["hitNum"] / sumDic["total"]) * 100).toFixed(2) + "%";
return;
}
// 其他列默认求和
const values = data.map((item) => Number(item[column.property]));
if (!values.every((value) => isNaN(value))) {
// 可以求和的列
sumDic[column.property] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
} else {
// 无法求和的列
sumDic[column.property] = "——";
}
});
// 指定列添加单位
sumDic["total"] += " 次";
sumDic["hitNum"] += " 次";
return Object.values(sumDic);
},
},
};
</script>
<style scoped>
.tableBox {
padding: 30px;
}
</style>