Vue el-table 合并计算

最后一行合并前几行的最后一列金额 计算。

<el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;"
      show-summary
      sum-text="应付金额"
      :summary-method="getSummaries"
    >
</el-table>

遇到问题:JS 计算不准确,最后会出来好多位小数

解决:保留两位小数。 当前是把显示总金额的钱给拿出来,然后进行toFixed,然后再赋值回去,不知道还有没有别的更好用的方法

getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 8) {
            sums[index] = '应付金额';
            return;
          }
          if (index === 9){
        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] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        }
        });
        if (sums[9]){ // sums[9] 是101元
           var sumsall = Number(sums[9].split(' ')[0]).toFixed(2)  // 保留两位小数
           sumsall = sumsall.toString() + " 元";
           sums[9] = sumsall
        }
        return sums;
      }

 

posted @ 2020-05-29 10:50  小兔子09  阅读(1307)  评论(0编辑  收藏  举报