js 数字逢三切断、整数最大9位、小数最大2位

言6662025-07-23 18:41

为了在 el-input 中实现这种功能，我们可以在 v-model 的输入值发生变化时进行格式化。

复制代码

<template>
  <el-input
    v-model="addForm.accrateval"
    @input="formatInput"
    placeholder="请输入数字"
  />
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        accrateval: '', // 用于绑定输入值
      },
    };
  },
  methods: {
    formatInput(value) {
      // 1. 去除非数字和小数点字符，且保证小数点最多一个
      let val = value.replace(/[^\d.]/g, '');

      // 2. 分割整数部分和小数部分
      const parts = val.split('.');
      let integerPart = parts[0].slice(0, 9); // 整数部分最多9位
      let decimalPart = parts[1] || '';

      // 3. 如果小数部分存在，保留最多2位
      decimalPart = decimalPart.slice(0, 2);

      // 4. 如果有小数部分，补足两位；如果没有小数部分，补".00"
      if (decimalPart) {
        val = integerPart + '.' + decimalPart.padEnd(2, '0');
      } else {
        val = integerPart + '.00';
      }

      // 5. 逢三切断
      val = val.replace(/(\d)(?=(\d{3})+(\.))/g, '\$1,');

      // 更新输入框的值
      this.addForm.accrateval = val;
    },
  },
};
</script>

注释：

输入 1234567 时，最终显示 1,234,567.00。
输入 1234567.89 时，显示 1,234,567.89。
输入 1234567890 时，显示 123,456,789.00（整数超过9位会被限制为9位）。

//方案2

不逢三切断 , 整数6位，小数2位

复制代码

<el-input
                style="width:150px;"
                v-model="addForm.accrateval"
                maxlength="9" 
                oninput="value=value.replace(/^(\d{0,6}(?:\.\d{0,2})?).*$/g, '$1')"
                @blur="$event.target.value?addForm.accrateval = Number($event.target.value)?Number($event.target.value).toFixed(2):'':''"
              />

输入 1234567 时，最终显示 123456时，显示123456.00

输入 123456.11 时，最终显示 123456.11