element UI table合计后的值的修改

element UI 合计后的样式或者值的修改

最近做的项目有关人民币的数值计算,但是发现element UI的合计有问题,不能显示标准的人民币显示模式,所以找到了这个方法可以修改合计的值

//htmtl
<el-table
        :data="tableData"
        style="width: 100%"
        show-summary
        :summary-method="getTotal"
      >
        <el-table-column type="index" width="60" label="序号">
        </el-table-column>
        <el-table-column prop="itemsTotalAmount" label="金额">
          <template slot-scope="scope">
            {{
              isNaN(scope.row.itemsTotalAmount)
                ? parseFloat(0).toFixed(2)
                : (scope.row.itemsTotalAmount).toFixed(2)
            }}元
          </template>
        </el-table-column>
      </el-table>
//js
methods:{
// 处理数据
    accAdd(arg1, arg2) {
       var r1, r2, m;
       try {
          r1 = arg1.toString().split(".")[1].length;
       } catch(e) {
          r1 = 0;
       }
       try {
          r2 = arg2.toString().split(".")[1].length;
       }catch(e){
          r2 = 0;
       }
       //解决JS浮点数精度问题
       m = Math.pow(10, Math.max(r1, r2));
       //保留两位小数
       return parseFloat((arg1 * m + arg2 * m) / m).toFixed(2);
      },
    // 修改合计
    getTotal(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 this.accAdd(prev,curr);
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          }
      });

      return sums;
    },
}

金额就是标准的人民币模式了
element UI table合计后的值的修改

上一篇:【两根指针——同向双指针】Lintcode 604. 滑动窗口内数的和


下一篇:Vue中的vxe-table基本使用教程5