问题:用户在输入金额的时候发现输入不上0.04,后来在用户提出这个问题后我发现,输入的数字中只要小数点后边带有0的都输入不上,例如:1.023、5.2306、8.2405。
开发环境:vue + elementui
使用v-model.number的原因:在el-input的输入框中我限制了输入框的type="number",致使用户只能输入数字,不能输入其他还有字符的情况,但是在获取这个变量时,获取的却是字符串类型,因此需要类型转换,使用v-model.number后,可以避免这个问题,但是紧接着也迎来了新的问题。
<el-form-item label="总合同额(元)" :label-width="formLabelWidth">
<el-input type="number" v-model.number="qkListform.zhte" disabled placeholder="请输入项目总合同额" ></el-input>
</el-form-item>
我在网上找了很多文章和资料,都没有发现有明确解决这个问题的方法,在此我列举几项我的解决思路,大家如果有好的解决方法也可以在评论区告诉我。
方法一:使用parseFloat()进行类型转换
将v-model.number改成v-model,在获取数据的时候需要手动转换下,比如上文中我的变量获取需要改写成parseFloat(this.qkListform.zhte),这样就可以了,如果需要判断下用户如果不输入需要默认更改成0,可以使用三目判断:this.qkListform.zhte ? parseFloat(this.qkListform.zhte) : 0
方法二:设置css样式
经过测试发现,如果将el-input标签更改成原生的input标签,则不存在小数点后边0输入不上的问题,此时需要在css文件中设置input输入框的样式,将input设置为el-input一样的样式即可,就可以避免这个问题
方法三:输入方式更改
其实这个也不能算是一种解决方法,只是这样输入小数点后边可以输入0,大家可以测试一下,比如输入0.04,在输入框中可以先输入0.4,在将光标移到4的前边输入0,这样也算是可以解决这个问题,但这个方案还是要看系统面向的用户
方法四:直接去掉.number
这里就需要测试了,看看你直接输入v-model获取的数字值你是否可以直接使用,比如说保存的时候需要将数据传递到数据库中是否可以直接存取,报不报错,如果不报错的话直接去掉.number就可以了,不需要改其他地方
我在项目中是使用了方法一和方法四,但是为了避免出现其他的问题,我还是建议大家在解决过程中可以使用方法一和方法二。
大家如果有更好的解决方案,欢迎在评论区中说出你的思路,后期如果有更好的解决方法,我也会及时更新的。