数字处理系列

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

<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限制只能输入正整数

<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-inputv-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+/, '')干掉首位就可以输入0limitToPositiveInteger(value) {// 限制只能输入正整数return value.replace(/[^\d]/g, '').replace(/^0+/, '');},},
};
</script>

（3）金额场景

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

<template><div><el-inputv-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 时不能输入小数（适用于百分比）

<template><div><el-inputv-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';} // 如果输入符合条件，更新 inputValueelse 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）身份证校验

<template><div><el-inputv-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/xif (/^\d{0,17}[0-9xX]$/.test(filteredValue)) {return filteredValue;} else {// 如果不符合规则，移除最后一个字符return value.slice(0, -1);}}}};</script>

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

<template><div><!-- 使用 @input="inputValue = handleInput(inputValue)" 的形式 --><el-inputv-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>