bigdecimal 保留两位小数_element中使用show-summary进行汇总时小数点的问题解决方法...

在使用show-summary 属性进行合计的时候经常会出现一个情况：没有保留2位小数，其实每一行本身也没有保留两位小数， 但是每行数据用template进行了特别的处理， 所以可以展示两位小数， 那合计行的小数位数怎样解决呢， 今天就来处理这个：

自带的合计是只要在 el-table 加入 show-summary ， 然后每个el-table-column 加入 prop="oriAmount"

就会显示合计了，但是为了保留2位小数或者能自定义某些运算，修改如下：

解决方案：

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

<

这个时候 其实跟不加这句是一样的， 因为这个时候是调用element自带的getSummaries

步骤2：

在methods自定义一个getSummaries，代码如下：

    //自定义合计行
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }

        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位小数
        }
      });
      return sums;
    }

此处主要代码都是用 element的原getSummaries的代码的，

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

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

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