之前在开发过程中遇到这么一个问题,一串数据需要在el-table中展示,其中含有金额字段,需要将其转换成标准数据格式,即三位一个逗号间隔。
今年刚毕业就上手项目了,第一次接触的Vue,开发经验少,也忘记了有过滤器这个玩意儿,傻傻的写下了这种为自己震撼的数据处理,这仅仅是一个微不足道的小界面,这样的数据处理有上千行的😱,做完还挺佩服自己,哈哈哈!!
for (let argument of this.selectConfirmList) {
argument.balanTotal = (parseFloat(argument.balanTotal).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
argument.interTotal = (parseFloat(argument.interTotal).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
argument.otherAmo = (parseFloat(argument.otherAmo).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
argument.value = (parseFloat(argument.value).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
}
但是神奇的事情发生了,当我需要对这些数据进行数据处理的时候才发现,问题很大,这些数据中包含了“,”;毕竟咱是第一次开发,很多方面都考虑不到。于是我有了就问题解决问题的想法,在for循环前面先把数据处理好,在最后再写一个数据格式的处理。
就这么做了一个数据量巨大的页面,脑瓜子嗡嗡的,于是翻了翻书,对呀,不是还有计算属性computed这个神器嘛,说干就干,乖乖,数据是不影响了,可是代码。。。您看
computed: {
prinBalance1() {
let value = parseFloat(this.form.prinBalance)
value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
return value;
},
interBalance1() {
let value = parseFloat(this.form.interBalance)
value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
return value;
},
total1() {
let value = parseFloat(this.form.total)
value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
return value;
},
disburse1() {
let value = parseFloat(this.form.disburse)
value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
return value;
},
cashBag1() {
let value = parseFloat(this.form.cashBag)
value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
return value;
},
},
就这?就这?
到了这个时候想起了老师上课讲的东西,幸亏没有还给老师,过滤器,对呀我怎么没有想到过滤器,见证奇迹的时候到了
页面代码:
<el-table
ref="dataTable"
:data="allClaimsList"
tooltip-effect="dark"
style="width: 100%">
。。。。
<el-table-column label="本金余额(元)" align="center">
<template slot-scope="scope">{{ scope.row.balanTotal|dealValue }}</template>
</el-table-column>
<el-table-column label="利息余额(元)" align="center">
<template slot-scope="scope">{{ scope.row.interTotal|dealValue}}</template>
</el-table-column>
<el-table-column label="代垫费用(元)" align="center">
<template slot-scope="scope">{{ scope.row.otherAmo |dealValue}}</template>
</el-table-column>
。。。。。
</el-table>
过滤器:
filters:{
dealValue(value){
value = (value.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
return value;
}
},
简直完美!在需要的地方加一个 | rounding大功告成!!
说笑了,其实写这个的目的就是想告诉自己,实战经验是多么的重要,看一百遍书不如敲个项目学的东西多。