说明:以下方法仅用于单页面,就是说如果是通过props传值进来的数据需要在进行改变,详看computed计算属性
另:千分位与数值的转换网上大多数都可以使用,我在这里也是引用了网上的一些代码,仅供参考
<!-- html代码 -->
<el-form-item label="总金额">
{{newNum(allprice)}}
</el-form-item>
<!-- 只读框 -->
<el-form-item label="账户余额">
<el-input :value="newNum(dkowoo)" readonly></el-input>
</el-form-item>
<!-- 可输入框 -->
<el-form-item label="充值金额" prop="money">
<el-input v-model.trim="ruleForm.money" @focus="delcommafy2(ruleForm.money)" @blur="blurmoneyformat(ruleForm.money)"></el-input>
</el-form-item>
computed: {
allprice() {
let that = this
//这里的判断是为了总金额不为NAN
if (Number.isNaN(parseInt(that.delcommafy(that.ruleForm.money)))) {
// 如果只读框中的值是通过父组件传进来的那么就需要在data中return一个新变量接收传过来的值
// 下面的dkowoo就是在data中接收传值的新变量
// 写法可直接写:dkowoo: this.传值变量名, 然后在这里使用,当然这只是为了渲染,如果是一个表单提交数据,那么不要改动其他的,只用变量接收传过来的值即可
return parseInt(that.delcommafy1(that.dkowoo))
} else {
let kodw = JSON.parse(JSON.stringify(that.ruleForm.money))
// console.log(kodw)
return parseInt(that.delcommafy(kodw)) + parseInt(that.delcommafy1(that.dkowoo))
}
}
},
// 注意:如果有传过来的值得话,那么需要在delcommafy字样的三个方法中加上num.toString()先转换为字符类型,避免报错
delcommafy1(num){
let kdwo = num.toString()
if((kdwo+"").trim()==""){
return"";
}
kdwo=kdwo.replace(/,/gi,'');
return this.dkowoo = kdwo;
},
delcommafy2(num){
if((num+"").trim()==""){
return"";
}
num=num.replace(/,/gi,'');
return this.ruleForm.money = num;
},
delcommafy(num){
if((num+"").trim()==""){
return"";
}
num=num.replace(/,/gi,'');
return num;
},
blurmoneyformat(inputValue){
//若输入框内容为空则不做处理
console.log(typeof inputValue, inputValue)
if(inputValue == '' || inputValue.length == 0){
return
}
//判断是否有小数点
if(inputValue.indexOf(".") != -1){
let str = inputValue.split(".")
if(str[0].length > 0){
let arr = str[0].split('')
let res = arr.every((item,index) => {
return item == 0 || item == '0'
})
if(res){
if(str[1]){
inputValue = '0.' + str[1]
}else{
inputValue = '0.00'
}
}else{
if(str[1]){
inputValue = str[0].replace(/\b(0+)/g,"") + '.' + str[1]
}else{
inputValue = str[0].replace(/\b(0+)/g,"") + '.00'
}
}
}
if(str[1].length == 1){
inputValue = inputValue + '0'
}
}else{
let arr = inputValue.split('')
let res = arr.every((item,index) => {
return item == 0 || item == '0'
})
if(res){
inputValue = '0.00'
}else{
inputValue = inputValue.replace(/\b(0+)/g,"") + '.00'
}
}
//千分位格式化
let intNum = inputValue.substring(0, inputValue.indexOf('.')).replace(/\B(?=(?:\d{3})+$)/g, ',');
let dot = inputValue.substring(inputValue.indexOf('.'), inputValue.length);
inputValue = intNum + dot
// 这里是去掉了小数点,若需要小数点可以将replace去掉
return this.ruleForm.money = inputValue.replace('.00', '')
},
newNum(num) {
num = num.toString().split('.')[0];
var newnumArr = [];
var newnum = '';
newnumArr.length = num.length;
var flag = 0;
for (var i = num.length - 1; i >= 0; i--) {
++flag;
if (flag == 3) {
if (i == 0) {
newnumArr[i] = num[i];
}
else {
newnumArr[i] = ',' + num[i] + '';
}
flag = 0;
}
else {
newnumArr[i] = num[i];
}
}
for (var i = 0; i < newnumArr.length; i++) {
newnum += newnumArr[i];
}
return newnum;
},