问题描述: 要求是文本框输入的时候,可以自动识别千分位,使用iview的InputNumber 数字输入框可以实现这个效果,文中附js转化千分位的方法

(1), render渲染InputNumber

1, 官方示例

2, 实现效果

MoneyFormList: any = {    columns: [      {        title: '收款金额',        key: 'AmountMoney',        render: (h, params) => {          return h('div', [            h('InputNumber', {              style: {                width: '120px'              },              props: {                value: params.row.AmountMoney,                formatter: value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),                parser: value => `${value}`.replace(/$s?|(,*)/g, '')                // 也可以写成如下形式: `${value}`或者value.toString()                // formatter: function (value) {                //   return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')                // },                // parser: function (value) {                //   return value.toString().replace(/$s?|(,*)/g, '')                // }              },              on: {                'on-change': e => {                  console.log(e)                }              }            })          ])        }      }    ]  }复制代码

备注: 本来是直接复制的iview api上面的代码,结果怎么都不生效,开始还以为是方法写错了,最后仔细看了看,才知道哪里写错了,下面对比两行代码,找出区别,写代码要认真啊

• replace(/B(?=(d{3})+(?!d))/g, ',')

• replace(/\B(?=(\d{3})+(?!\d))/g, ',')

(2), 附js转化千分位函数

1, 方法一

shiftNumber (num) {    return num && num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')  }复制代码

• 备注: 这个方法会有点问题,具体执行打印结果如下,问题就是小数点也会被加逗号

console.log(this.shiftNumber(1111111111111.9999999999)) // 1,111,111,111,112console.log(this.shiftNumber(1111111111111.99111111111)) // 1,111,111,111,111.9,912console.log(this.shiftNumber(1111111111111.99)) // 1,111,111,111,111.99console.log(this.shiftNumber(1111111111111.2222222222222)) // 1,111,111,111,111.2,222console.log(this.shiftNumber(1111111111111.10000000)) // 1,111,111,111,111.1console.log(this.shiftNumber(1111111111111.00)) // 1,111,111,111,111复制代码

2, 方法二

commafy (num) {  return num && num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($1, $2) {    return $2 + ','  })}复制代码

执行结果打印如下,这个小数点不会被添加逗号

console.log(this.commafy(1111111111111.9999999999)) // 1,111,111,111,112console.log(this.commafy(1111111111111.99111111111)) // 1,111,111,111,111.9912console.log(this.commafy(1111111111111.99)) // 1,111,111,111,111.99console.log(this.commafy(1111111111111.2222222222222)) // 1,111,111,111,111.2222console.log(this.commafy(1111111111111.10000000)) // 1,111,111,111,111.1console.log(this.commafy(1111111111111.00)) // 1,111,111,111,111复制代码

• 如有问题,欢迎指正

• 本文为原创,如需转载,请注明出处：