首页 > 其他分享 >Element 中表单输入整数及两位小数

Element 中表单输入整数及两位小数

时间:2023-02-09 13:02:43浏览次数:38  
标签:coin Element money value replace formFieldsData 表单 小数


<template>
<div id="platformActivity">
<el-form :model="formFieldsData">
<!-- 充值金额保留两位小数 -->
<el-form-item label="充值金额" prop="money" label-width="120px">
<el-input
placeholder="请输入充值金额"
clearable style="width:90%;"
v-model="formFieldsData.money"
@input="(value)=>{this.formFieldsData.money=this.toFloatNumer(value)}">
</el-input>
</el-form-item>
<!-- 赠送书币输入只能为整数 -->
<el-form-item label="赠送书币" prop="coin" label-width="120px">
<el-input
placeholder="请输入赠送书币"
clearable style="width:90%;"
v-model="formFieldsData.coin"
@input="(value)=>{this.formFieldsData.coin=value.replace(/\D/g,'');}">
</el-input>
</el-form-item>
</el-form>
</div>
</template>


<script>

export default {
name: "platformActivity",
data() {
return {
// 表单数据
formFieldsData:{
// 书币
coin:""
// 充值
money:"",
},
};
},
methods: {
// 转换两位小数
toFloatNumer(value) {
// 清除"数字"和"."以外的字符
value = value.replace(/[^\d.]/g,"");
// 清除开头的"."
value = value.replace(/^\./g,"");
// 将超过两位小数以外的数字替换为字符"."
value = value.replace(/\.{2,}/g,".");
// 除了第一个小数点以后,后面的小数点全部替换为空
value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
// 只能输入两个小数
value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
// 如果没有小数点,首位不能为类似于 01、02的数字
if(value.indexOf(".")< 0 && value !=""){
if(value.substr(0,1) == '0' && value.length == 2){
value= value.substr(1,value.length);
}
}
return value
}

},
};
</script>

标签:coin,Element,money,value,replace,formFieldsData,表单,小数
From: https://blog.51cto.com/u_15959833/6046876

相关文章

  • Element 中使用加载动画
    <script>//1.引入动画组件import{Loading}from'element-ui';exportdefault{name:"index",data(){return{//2.定义实例......
  • Element 中根据屏幕大小动态计算表格高度以实现固定表头
    在ElementUI的表格组件中,要想固定表头,必须给表格指定一个高度,但是用户的屏幕大小是不一样的,为了能将表格底部的分页区域始终显示在屏幕内,就需要动态计算表格的高度。以下是......
  • Element 中查询前多少天、前多少周、前多少月的数据
    在开发后台管理系统时,经常会遇到这样一种需求,查询前多少天、多少周、多少月的数据,虽然UI框架有自带的组件可以实现这些功能,但是操作起来却不是很方便,而且这些都是查询最近......
  • Vue2.9.6安装element-ui
    阅读目录安装element-ui源码路由文件:E:\node\vue296\src\router\index.js入口:E:\node\vue296\src\main.js组件:E:\node\vue296\src\components\Count.vue......
  • ElementUI手动控制popover弹层的显示与隐藏
    转自于:https://huaweicloud.csdn.net/638f116ddacf622b8df8e566.html?spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogComme......
  • 230. Kth Smallest Element in a BST[Medium]
    230.KthSmallestElementinaBSTGiventherootofabinarysearchtree,andanintegerk,returnthekthsmallestvalue(1-indexed)ofallthevaluesofthe......
  • vue3+element表格数据导出
    实现效果导出后的效果:步骤第一步:安装依赖npminstall--savexlsxfile-saver第二步:给表格添加id,导出的时候需要用到<!--导出按钮--><el-buttontype="pri......
  • element plus + vue3表单第一次数据未清空的bug问题解决
    使用框架:elementPlus+vue3场景描述:场景一:表单的添加和修改功能,公用同一个弹框,点击修改后,点击添加表单显示的是上次修改的数据。场景二:点击修改,数据回显到表单,然后......
  • element表单嵌套检验+动态添加
    在写表单的时候,容易碰到这种嵌套表单的数据校验,并且这种表单是动态添加的,网上大部分的做法是表单套表单,实际上只需要一个表单就可以了。为了方便观看,这里只列举了两条数......
  • 表单设计器(avue-form-design)--引入
    安装依赖npminstallelement-ui@smallwei/avue@sscfaith/avue-form-designmain.js引入importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'......