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

iview InputNumber 千分位格式化
本文介绍如何使用 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
复制代码
<think>嗯,用户想知道在iView表格中如何使用render函数进行自定义渲染。首先,我需要回忆一下iView(现在应该叫View UI)的文档和相关知识。记得iView的Table组件可以通过columns配置中的render函数来自定义单元格内容,这在引用[1]和[4]里提到过。 用户可能需要一个具体的示例,所以得准备一个代码例子。比如,渲染操作按钮或者格式化数据。根据引用[1],render函数接收三个参数:row、column和index,分别对应当前行的数据、列的数据和行索引。然后,在函数里返回一个VNode,通常用h函数(createElement)来创建元素。 还要注意this指向的问题,引用[2]中提到,如果在外部文件引入columns,this可能不会指向Vue实例,导致方法无法调用。解决方法可能是在组件内部定义columns,或者使用箭头函数绑定this。这点在回答时需要特别提醒用户,避免他们遇到同样的问题。 另外,引用[3]和[4]里提到,iViewrender函数支持JSX,可能有些用户更喜欢用JSX来编写模板,所以可以给出两种方式:使用h函数和JSX。同时,复杂的组件嵌套可能需要使用作用域插槽或者更复杂的render函数结构。 需要确保示例代码正确,比如在render函数中正确使用h函数创建按钮,绑定事件。事件处理函数要定义在methods里,且在columns配置里正确引用。还要注意iView的版本,比如是否使用View UI(支持Vue 2),或者是否有其他注意事项,如transfer属性等,但用户的问题主要集中在render函数的使用上,所以可能不需要深入这些细节。 最后,生成相关问题,帮助用户进一步学习,比如性能优化、动态渲染、事件处理等问题,这些都可以基于引用中的内容来设计。同时,提醒用户关于this指向的问题,引用[2]中的情况,避免他们踩坑。</think>### iView表格使用render函数自定义渲染方法 在iView(View UI)表格中,使用`render`函数可实现灵活的自定义单元格渲染。以下是实现步骤和示例: --- #### 一、基础用法 通过`columns`配置项的`render`属性定义渲染逻辑: ```javascript columns: [ { title: '操作', key: 'action', render: (h, { row, index }) => { return h('Button', { props: { type: 'primary' }, on: { click: () => this.editRow(row) } }, '编辑') } } ] ``` * `h`为createElement函数,用于创建虚拟节点 * 通过`row`获取当前行数据,`index`获取行索引[^1] --- #### 二、JSX语法优化 启用JSX后可使用更直观的模板语法(需配置Babel): ```javascript render: (h, { row }) => ( <div> <i-button on-click={ () => this.showDetail(row) }>查看</i-button> <tag color="green">{ row.statusText }</tag> </div> ) ``` --- #### 三、复杂组件嵌套 可在单元格内渲染Modal等组件: ```javascript render: (h, { row, index }) => { return h('a', { on: { click: () => this.$Modal.info({ title: '用户信息', content: `姓名:${row.name}<br>年龄:${row.age}` }) } }, '查看详情') } ``` 该示例点击链接会触发模态框显示详细信息[^3] --- #### 四、作用域插槽替代方案 Vue2.6+推荐使用作用域插槽: ```html <Table :columns="columns"> <template slot-scope="{ row }" slot="action"> <Button @click="handleDelete(row)">删除</Button> </template> </Table> ``` --- #### 特别注意 1. **this指向问题**:若columns定义在外部文件,需使用箭头函数或`bind`保持上下文[^2] 2. **性能优化**:复杂渲染建议使用`renderHeader`和`render`分离逻辑[^4] 3. **版本兼容**:iView 4.x+需使用View UI的语法规范 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值