el-input-number设置step、stepStrictly后,数据精度丢失的问题

el-input-number的配置

<el-input-number
  v-else-if="colInputType(column, row) === 'number'"
  v-model="row[column.key]"
  :placeholder="`${$t('documentation.pleaseInput')}`"
  :controls="false"
  :min="minFn(column, row)"
  :max="maxFn(column, row)"
  :step-strictly="true"
  :step="0.00001"
  :disabled="itemDisabled(column, row)"
  clearable
  @change="
    (value) =>
      inputNumberEditorOnChange(value, $index, column, row)
  "
  v-bind="column"
>
</el-input-number>```

这里是设置5位小数的step,初始化时,用户修改时,很容易有精度问题;
设置4位小数step,需要在特定数字时,才能回体现这个bug;
在这里插入图片描述
根本原因:

element底层组件el-input-number的监听函数有问题;
请添加图片描述
测试代码如下

function getPrecision(value) {
  if (value === undefined) return 0;
  const valueString = value.toString();
  const dotPosition = valueString.indexOf('.');
  let precision = 0;
  if (dotPosition !== -1) {
    precision = valueString.length - dotPosition - 1;
  }
  return precision;
}
function test(value, step) {
  let newVal = value === undefined ? value : Number(value);
  if (newVal !== undefined) {
    if (isNaN(newVal)) {
      return;
    }

    if (true) {
      const stepPrecision = getPrecision(step);
      const precisionFactor = Math.pow(10, stepPrecision);
      newVal = Math.round(newVal / step) * precisionFactor * step / precisionFactor;
    }

    return newVal;
  }
}
test(1088, 0.00001); //* 1088.0000000000002

解决方案:
1、stepPrecision为false,封装个组件,手动进行圆整;
2、stepPrecision为true,结合precision一起使用;

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值