一、需求说明
- 只能输入数字和小数点，保留小数点后两位；
- 最多输入6位；
- 删除所有内容时，默认为0；
二、问题说明
问题1：使用 precision 数值精度 时，超出规定小数位数时会自动四舍五入；
问题2：使用 maxlength 最大长度 时，数值精度失效；
三、解决方法
（一）完整代码
<a-table
rowKey="sort"
:columns="scoreInfo.columns"
:data-source="scoreInfo.dataSource"
:loading="scoreInfo.loading"
:pagination="false"
class="score-rubric"
:scroll="{ y: 280 }"
>
<template #action="{ record }">
// 数字输入框
<a-input-number
v-model:value="record.scoreTeacher"
:min="0"
:max="parseFloat(record.score)"
:step="0.01"
@change="totalSumNum"
:formatter="value => `${value}`"
:parser="value => value?value.replace(/[^0-9.]/g, 0).replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1'):0 "
:maxlength="6"
/>
</template>
</a-table>
<div class="sum">总得分：{{ scoreInfo.sum }}</div>
/**
* @description: 总得分
* @return {*}
*/
const totalSumNum = () => {
let sumAll = 0;
scoreInfo.dataSource.forEach(item => {
sumAll += +item.scoreTeacher;
});
scoreInfo.sum = sumAll.toFixed(2);
};（二）使用到的部分属性说明
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| formatter | 指定输入框展示值的格式 | function(value: number | string): string | - |
| max | 最大值 | number | Infinity |
| min | 最小值 | number | -Infinity |
| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - |
| precision | 数值精度 | number | - |
| step | 每次改变步数，可以为小数 | number|string | 1 |
| value(v-model) | 当前值 | number |
（三）使用到的正则说明
1、不四舍五入
value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g,'$1')2、限制输入：只能输入“0123456789.”
value.replace(/[^0-9.]/g, 0)四、效果展示
