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

最新推荐文章于 2023-10-20 14:20:47 发布

转载最新推荐文章于 2023-10-20 14:20:47 发布 · 5k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b5ee564e51d4519610e231a

文章标签：

#javascript #ViewUI

本文介绍如何使用 iview 的 InputNumber 组件实现在文本框中输入数字时自动格式化为千分位显示，并提供两种 JavaScript 函数实现方法。

问题描述: 要求是文本框输入的时候,可以自动识别千分位,使用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
复制代码