一、需求说明

  1. 只能输入数字和小数点,保留小数点后两位;
  2. 最多输入6位;
  3. 删除所有内容时,默认为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最大值numberInfinity
min最小值number-Infinity
parser指定从 formatter 里转换回数字的方式,和 formatter 搭配使用function( string): number-
precision数值精度number-
step每次改变步数,可以为小数number|string1
value(v-model)当前值number

(三)使用到的正则说明

1、不四舍五入

value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g,'$1')

2、限制输入:只能输入“0123456789.

value.replace(/[^0-9.]/g, 0)

四、效果展示

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐