Element UI 【表格合计】el-table 实战范例 -- 添加单位，自定义计算逻辑

需求描述

末尾合计行的需求如下：

• 第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>