iview 使用render渲染InputNumber,並格式化數字

囧囧圖圖發表於2018-07-30
View

問題描述: 要求是文字框輸入的時候,可以自動識別千分位,使用iview的InputNumber 數字輸入框可以實現這個效果,文中附js轉化千分位的方法

(1), render渲染InputNumber

1, 官方示例

iview 使用render渲染InputNumber,並格式化數字

2, 實現效果

iview 使用render渲染InputNumber,並格式化數字
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
複製程式碼

相關文章