el-input只允许输入数字(可以解决某次操作输入的是中文,会导致后续再输入数字,无法更新v-model的值的情况):
<el-input
:value="row.selectGradeNum"
@input="(str) => (row.selectGradeNum = str.trim().replace(/[^\d]/g, ''))"
></el-input>
这个方法可以把字符串中的数字提取出来,如果有小数就保留两位小数,有多个前导0就去除。
replaceNumberStr(str, noFloat) {
// 使用正则表达式匹配输入的内容,只保留数字和小数点
let cleanedValue = str.replace(/[^0-9.]/g, '');
// 移除多余的小数点
cleanedValue = cleanedValue.replace(/\.{2,}/g, '.');
// 确保小数点只存在一个
const dotCount = cleanedValue.split('.').length - 1;
if (dotCount > 1) {
const parts = cleanedValue.split('.');
cleanedValue = `${parts[0]}.${parts.slice(1).join('')}`;
}
// 移除前导零
cleanedValue = cleanedValue.replace(/^0+(?=\d)/, '');
// 保留两位小数(只对小数部分进行格式化的优势是,避免输入300,在删除最后一个0时,输入框内容变为30.00)
const parts = cleanedValue.split('.');
const integerPart = parts[0];
const decimalPart = parts[1] || '';
// 判断是否为负数
if (integerPart.length === 0 || integerPart === '-') {
cleanedValue = '';
}
// 不保留小数
if (noFloat) {
return integerPart;
}
if (decimalPart.length > 2) {
cleanedValue = `${integerPart}.${decimalPart.slice(0, 2)}`;
}
return cleanedValue;
},
// 校验字符串,返回整数部分
replaceNumberStr2(str) {
return this.replaceNumberStr(str, true);
}