本文针对el-input金钱方面的格式化保留两位小数,实际为4位或更多。
1.格式化el-input,显示为2位小数,实际为4位,和利润率为83%,实际为0.83
最近公司在写一个年入几十亿的大项目,其中的涉及到钱方面,税率和利润率等等的加减乘除。
要求:文本框中显示10.77,数据库中显示为10.7692,数据库中保留4位小数,前端显示为2位小数,税率和利润率要求带上%符号。
大部分的el-input使用的都是v-model双向绑定,那么文本框的值改了为2位小数,数据库保存时候的值也会被改变,这时候一定要想到v-model的弟弟,单向绑定,只从本页面的值获取,且不同时改变。
:value="dateForm.amout"
#这个只是获取本页的变量,单向绑定,我们推荐使用Math.round,vue中.toFixed()有些bug。
:value="(Math.round(dateForm.amout * 100)/100).toFixed(2)"
#这里使用Math.round来四舍五入,使用.toFixed格式化代码(如果你input中不会为整数,那就不需要用.toFixed,这里为了排版好看一些,比如9,我要显示9.00,使用.toFixed就可。
税率和利润率
:value="Math.round(num * 100) + '%'"
# num为税费,即0.07
如果页面中格式化的el-input较多,可以抽出去
#这里我使用的本地方法,没有封装出去到main.js和其他的地方
#在methods内写
// 格式化数值,百分比
formatPercentage(num) {
return Math.round(num * 100) + '%';
},
// 格式化数值,四舍五入,保留两位小数
formatRound(num) {
return (Math.round(num * 100)/100).toFixed(2);
},
#在el-input中写
<el-input
:disabled="true"
:value="formatRound(dataForm.amount)"
placeholder="总收入"
style="width: 82%"
></el-input>
# 百分比的也一样
2.这里在介绍一下,输入金额的格式。
只能输入正数,即大于等于0,不可以输入减-,其他任何符合和字母。
<el-input
type="number"
v-if="scope.row.costAmount.edit"
v-model="scope.row.costAmount.value"
placeholder="请输入金额"
onkeypress="return (/[\d\.]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
@input="changeCostAmount(scope.row, scope.$index)"
></el-input>
在method中写方法
# 截取小数,输入两位小数以上后,不让再次输入
row.costAmount.value = row.costAmount.value.replace(
/^(\d+)\.(\d\d).*$/,
"$1.$2"
);