（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>