iview 使用render渲染InputNumber,并格式化数字

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


(1), render渲染InputNumber

1, 官方示例

2, 实现效果

3, 处理代码

  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,112
console.log(this.shiftNumber(1111111111111.99111111111)) // 1,111,111,111,111.9,912
console.log(this.shiftNumber(1111111111111.99)) // 1,111,111,111,111.99
console.log(this.shiftNumber(1111111111111.2222222222222)) // 1,111,111,111,111.2,222
console.log(this.shiftNumber(1111111111111.10000000)) // 1,111,111,111,111.1
console.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,112
console.log(this.commafy(1111111111111.99111111111)) // 1,111,111,111,111.9912
console.log(this.commafy(1111111111111.99)) // 1,111,111,111,111.99
console.log(this.commafy(1111111111111.2222222222222)) // 1,111,111,111,111.2222
console.log(this.commafy(1111111111111.10000000)) // 1,111,111,111,111.1
console.log(this.commafy(1111111111111.00)) // 1,111,111,111,111
复制代码
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值