element中使用show-summary进行汇总时小数点的问题解决方法

自带的合计是只要在 el-table 加入 show-summary ，
然后每个el-table-column需要统计的列 加入 prop

步骤1： 首先在 el-table 加入 :summary-method=“getSummaries” 如下：

<el-table
  ref="bodyTable"
  :data="bodyTable"
  tooltip-effect="dark"
  style="width: 100%"
  height="250"
  border
  show-summary
  :summary-method="getSummaries"
>
1
2
3
4
5
6
7
8
9
10

此处主要代码都是用 element的原getSummaries的代码的，
步骤2：在methods自定义一个getSummaries，代码如下：

//自定义合计行

  getSummaries(param){
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = "合计";
        return;
      }
      switch(column.property) {  // column.property可以匹配它的每一列的命名， 然后赋值
        case "money": //列名
        //  if (column.property !== undefined) {
            //加了prop属性的el-table-column 才能找到column.property
            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);
            } else {
              sums[index] = "";
            }
            sums[index] = sums[index].toFixed(2); //保留2位小数
        //  }
          break;
        default:
          break;
      }
    });

    return sums;
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

特殊点 1是在column.property !== undefined 才做合计，以免过多报错。

2是在最后加上toFixed(2) 保留2位小数

有了自定义的方法， 如果有其他合计的特殊要求都可以自己满足。