el-table合计行单元格合并、合并行金额四舍五入保留两位小数、合计行样式修改

最近在写项目的时候用到了合计行，本篇文章提供了el-table使用合计行的方案。

最终效果：

1. 合计行单元格合并3格。
2. 合计行金额四舍五入保留两位小数。
3. 合计行样式修改。

首先，先看一下Element的el-table组件的相关代码：

<el-table 
	:data="tableData" 
	ref="tableRef" 
	show-summary
    :summary-method="summaryMethod"
	:span-method="spanMethod">
    <!--   内容省略   -->
</el-table>

这些属性或事件都是Element自带的，是本文章需要用到的，使用ElementPlus的用户可能有所差异，自行根据官方文档替换即可。

• show-summary 是否在表尾显示合计行
• summary-method 自定义的合计计算方法
• span-method 合并行或列的计算方法

ok，基本属性与方法介绍完毕，下面我们直接展示代码，复制即可使用。

1. 合并单元格：

  methods:{
    spanMethod({ row, column, rowIndex, columnIndex }) {
      this.$nextTick(() => {
        if (this.$refs.tableRef.$el) {
          let current = this.$refs.tableRef.$el
            .querySelector(".el-table__footer-wrapper")
            .querySelector(".el-table__footer");
          let cell = current.rows[0].cells;
          cell[0].style.textAlign = "center"; // 合计行第一列字段居中显示。
          cell[1].style.display = "none";
          cell[2].style.display = "none"; // 隐藏被合并的单元格，不隐藏的话还会占着位置。
          cell[0].colSpan = "3"; // 合并单元格
          cell[cell.length - 3].style.color = "red"; // 修改合计行某一个单元格的样式。
        }
      });
    },
  }

2. 合计方法：

  methods:{
    summaryMethod(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((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] = sums[index].toFixed(2);
        }
      });
      return sums;
    },
  }