vue系列---【vue 使用decimal.js 解决小数相加合计精确度丢失问题】

1. 使用 npm 安装 decimal.js 库

npm install decimal.js

2.在 Vue 组件中引入该库

import Decimal from 'decimal.js';

3.使用示例

footerMethod({columns, data}){
   let sumArr = [];
   columns.map((column, columnIndex)=>{
        if(columnIndex === 0){
           sumArr[columnIndex] = '合计';
        }
        // 计算数字合计
        if(
            [
               'lAmount1',
               'lAmount2'
            ].includes(column.property)
         ){
            // 1.将数组内的所有小数值转为 Decimal 类型，并进行累加运算
            let count = new Decimal(0);
            data.forEach(item => {
              let num = item[column.property]
                  ?typeof item[column.property] !='number'
                   ?parseFloat(item[column.property].replace(/[^\d\.-]/g, ""))
                   :item[column.property]
                  :0;
              count = count.plus(parseFloat(num));
            });
              2.将得到的 Decimal 类型结果转换为普通的 JavaScript 数字类型
              let result = count.toNumber();
                sumArr[columnIndex] = toThousands(Math.floor(result*100)/100);
              }
               // 计算某类字符串出现的次数，比如组合类型
               if(column.property == 'fileName'){
                   let count = 0;
                   // let arr = []; 
                   data.forEach(item=>{
                     // 1、数组针对文件名去重后得到的count
                     // if(!arr.includes(item.fileName)){
                     //     count += 1;
                     //     arr.push(item.fileName);
                     // }
                     if(item.id) count += 1;
                   })
                   sumArr[columnIndex] = toThousands(count);
                }
            }) 
            return [sumArr]
         }