数字处理系列

（1）将数字转化成中文的过滤器

html 复制代码

<template>
    <div>
      <p>数字转中文：{{ 110 | numberToChinese }}</p>
    </div>
  </template>
  
  <script>
  export default {
    filters: {
        numberToChinese(num) {
            const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
            const units = ['', '十', '百', '千', '万', '十万', '百万', '千万', '亿'];

            // 将数字转为字符串并分离每个数字
            let str = String(num);
            let len = str.length;
            
            // 结果字符串
            let result = '';
            
            // 遍历每一个数字，根据其位置决定是否添加单位（十、百、千等）
            for (let i = 0; i < len; i++) {
                let n = +str[i]; // 获取数字
                let unit = units[len - i - 1]; // 获取当前数字的单位
                
                // 当遇到"0"时，不添加单位，但处理连续零时只保留一个零
                if (n === 0) {
                // 如果结果已有数字，且最后一位不是零，才添加零
                if (result[result.length - 1] !== chineseNums[0]) {
                    result += chineseNums[0];
                }
                } else {
                result += chineseNums[n] + unit;
                }
            }

            // 处理 "一十" 的特殊情况，中文中 "一十" 应写作 "十"
            result = result.replace(/^一十/, '十');

            // 处理结果最后的"零"（如果是零结尾的数字，比如 1000，应去掉多余的零）
            result = result.replace(/零+$/, '');

            return result;
        }
    }
  };
  </script>

（2）正整数

el-table中的el-input限制只能输入正整数

html 复制代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column label="成绩">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.score"
          @input="scope.row.score = limitToPositiveInteger(scope.row.score)"
          size="small"
        ></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '张三', score: '' },
        { date: '2016-05-04', name: '李四', score: '' },
        // ...
      ],
    };
  },
  methods: {
  //把.replace(/^0+/, '')干掉首位就可以输入0
    limitToPositiveInteger(value) {
      // 限制只能输入正整数
      return value.replace(/[^\d]/g, '').replace(/^0+/, '');
    },
  },
};
</script>

（3）金额场景

el-input限制组件只能输入数字，且整数部分有两位或两位以上时第一位不能为 0，并且小数部分最多只能输入两位小数。(适用于输入金额场景)

html 复制代码

<template>
    <div>
      <el-input
        v-model="inputValue"
        @input="inputValue = handleInput(inputValue)"
        placeholder="请输入数字"
      ></el-input>
      <el-button @click="test">打印</el-button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputValue: ''
      };
    },
    methods: {
      test(){
        console.log(this.inputValue)
      },
      handleInput(value) {
        // 允许输入整数或小数，且第一位不能为0，小数点后最多两位
        const regex = /^(?!0\d)\d*(\.\d{0,2})?$/;
        if (regex.test(value)) {
           return value;
        } else {
          // 如果不符合规则，尝试修复输入
          return value.replace(/[^0-9.]/g, '') // 移除非数字和小数点
                                           .replace(/(\..*)\./g, '$1') // 禁止多于一个小数点
                                           .replace(/^0+(\d)/, '$1') // 禁止整数部分多余的0
                                           .replace(/^(\d+)\.(\d{2}).*$/, '$1.$2'); // 限制小数点后两位
        }
      }
    }
  };
  </script>

（4）百分比

el-input 组件只能输入整数和小数，小数部分最多两位，且整数部分只能输入 0 到 100，并且当整数部分正好是 100 时不能输入小数（适用于百分比）

html 复制代码

<template>
    <div>
      <el-input
        v-model="inputValue"
        @input="inputValue = handleInput(inputValue)"
        placeholder="请输入0到100之间的数字，小数最多两位"
      ></el-input>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputValue: ''
      };
    },
    methods: {
      handleInput(value) {
        // 检查输入值是否符合条件
        const regex = /^(100|[1-9]?\d)(\.\d{0,2})?$/;
  
        // 如果整数部分是100，不允许输入小数
        if (/^100(\.\d*)?$/.test(value)) {
          return '100';
        } 
        // 如果输入符合条件，更新 inputValue
        else if (regex.test(value)) {
            return value;
        } 
        // 不符合条件时，修正输入值
        else {
            return value.replace(/[^0-9.]/g, '') // 移除非数字和小数点
                                           .replace(/(\..*)\./g, '$1') // 禁止多于一个小数点
                                           .replace(/^0+(\d)/, '$1') // 去掉前导0
                                           .replace(/^(\d{1,2})\.(\d{2}).*$/, '$1.$2') // 限制小数部分两位
                                           .replace(/^([1-9]\d?|0)(\.\d{0,2})?.*/, '$1$2'); // 限制整数部分在0-99之间
        }
      }
    }
  };
  </script>

（5）身份证校验

html 复制代码

<template>
    <div>
      <el-input
        v-model="inputValue"
        @input="inputValue = handleInput(inputValue)"
        placeholder="请输入18位身份证号码"
        maxlength="18"
      ></el-input>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputValue: ''
      };
    },
    methods: {
      handleInput(value) {
        // 过滤掉非数字和非字母X/x字符
        let filteredValue = value.replace(/[^0-9xX]/g, '');
        
        // 如果长度超过18位则截断
        if (filteredValue.length > 18) {
          filteredValue = filteredValue.slice(0, 18);
        }
  
        // 确保前17位是数字，最后一位可以是数字或字母X/x
        if (/^\d{0,17}[0-9xX]$/.test(filteredValue)) {
          return filteredValue;
        } else {
          // 如果不符合规则，移除最后一个字符
          return value.slice(0, -1);
        }
      }
    }
  };
  </script>

（6）只能输入数字和小数（不限制小数位数）

html 复制代码

<template>
    <div>
      <!-- 使用 @input="inputValue = handleInput(inputValue)" 的形式 -->
      <el-input
        v-model="inputValue"
        @input="inputValue = handleInput(inputValue)"
        placeholder="请输入数字或小数"
        clearable
      ></el-input>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputValue: ''
      };
    },
    methods: {
      handleInput(value) {
        // 使用正则表达式匹配数字和小数点，不限制小数位数
        const reg = /^(\d+)(\.\d*)?$/;
  
        // 如果匹配正确，返回输入的值；否则返回一个空字符串（或其他默认值）
        if (reg.test(value) || value === '') {
          return value;
        } else {
          return '';  // 返回一个空字符串或者你想要的默认值
        }
      }
    }
  };
  </script>