el-table 数字千分位分割

您可以使用 el-table 的 formatter 属性来实现数字的千分位分割。在 formatter 函数中，将数字转换为字符串并使用正则表达式添加逗号。

例如：

<el-table-column prop="salary" label="薪资" :formatter="formatSalary"></el-table-column>

methods: {
  formatSalary(row, column, cellValue) {
    if (cellValue !== null) {
      return cellValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    } else {
      return ''
    }
  }
}

在这个例子中，formatSalary 函数将接收三个参数：当前行的数据对象 row，当前列的配置对象 column 和当前单元格的值 cellValue。在函数中，我们首先检查单元格的值是否为 null，如果不是，则将其转换为字符串并使用正则表达式添加逗号，最后返回结果。

注意，正则表达式 /\B(?=(\d{3})+(?!\d))/g 的含义是匹配不在单词边界的、连续三个数字的位置，并在这些位置后添加逗号。

相关问题

vue el-input 金额千分位

Vue中的el-input组件可以用来输入数字类型的数据，但是如果我们想要对输入的金额进行千分位格式化，就需要对其进行处理。实现方式如下：

1. 自定义过滤器

Vue中提供了过滤器的机制，可以方便地对数据进行处理。我们可以定义一个过滤器，用来将输入的金额进行格式化，然后在显示时调用该过滤器即可。

代码如下：

<template>
  <div>
    <el-input v-model="money"></el-input>
    <span>{{money | thousands}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: ''
    }
  },
  filters: {
    thousands(val) {
      return Number(val).toLocaleString()
    }
  }
}
</script>

2. 自定义指令

除了过滤器，我们还可以使用指令来实现千分位格式化。指令可以用来扩展现有元素的行为，用法比较灵活。我们可以定义一个v-thousands指令，用来将输入框的内容进行格式化。

代码如下：

<template>
  <el-input v-model="money" v-thousands></el-input>
</template>

<script>
export default {
  data() {
    return {
      money: ''
    }
  },
  directives: {
    thousands: {
      bind(el, binding, vnode) {
        el.oninput = function() {
          let value = el.value.replace(/,/g, '')
          let arr = value.split('.')
          let reg = /\d{1,3}(?=(\d{3})+$)/g;
          arr[0] = arr[0].replace(reg, '$&,')
          el.value = arr.join('.')
        }
      }
    }
  }
}
</script>

以上两种方式都能够实现对金额的千分位格式化。不过要注意的是，这种格式化只是单纯的改变了显示方式，实际上输入的金额仍然是未处理过的原始值，需要在提交数据时进行处理。

vue el-input金额千分位添加逗号

在Vue Element-UI中，可以通过自定义过滤器来实现输入框金额数字添加千分位。具体实现方法如下：
1. 在Vue组件中定义一个过滤器，用于将数字转换成千分位格式的字符串：

filters: {
  thousands: function (value) {
    if (!value) return '0.00'
    let intPart = parseInt(value).toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
    let floatPart = '.00'
    let valueStr = value.toString()
    if (valueStr.indexOf('.') !== -1) {
      floatPart = valueStr.substr(valueStr.indexOf('.'))
    }
    return intPart + floatPart
  }
}

2. 在el-input组件中使用该过滤器：

<el-input v-model="amount" :value="amount | thousands" @input="handleInput"></el-input>

3. 在Vue组件中定义一个方法，用于处理用户输入：

methods: {
  handleInput: function (value) {
    let newValue = value.replace(/[^\d.]/g, '')
    let reg = /^(\-)*(\d+)\.(\d\d).*$/;
    if (reg.test(newValue)) {
      newValue = newValue.replace(reg, '$1$2.$3')
    } else {
      newValue = newValue.replace(/[^\d]/g, '')
    }
    this.amount = newValue
  }
}

该方法会将用户输入的内容进行过滤，只保留数字和小数点，并且限制小数点后只能输入两位小数。同时，该方法会更新Vue组件中的数据，以便在输入框中显示正确的数值。