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;
},
}
金额就是标准的人民币模式了