需求描述
末尾合计行的需求如下：
- 第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>
