当前位置: 首页 > news >正文

el-input限制只能输入数字,两位小数,正数,限制长度

废话不多说,直接上代码

<el-input
	v-model.number="scope.row.agentMount"
    type="number"
    maxlength="10"
    placeholder="请输入金额"
    class="agentInput"
    @blur="inputBlur(scope)"
    @keyup.native="
    scope.row.agentMount = onAgentInput(scope.row, 2, scope.$index)"
/>

//限制保留两个小数
onAgentInput(row, limit, index) {
	let { agentMount } = row;
    let str = agentMount.toString();
    let len1 = str.substr(0, 1);
    let len2 = str.substr(1, 1);
    //如果第一位是0,第二位不是点,就用数字把点替换掉
    if (str.length > 1 && len1 == 0 && len2 != '.') {
      str = str.substr(1, 1);
    }
    //第一位不能是.
    if (len1 == '.') {
      str = '';
    }
    //限制只能输入一个小数点
    if (str.indexOf('.') != -1) {
      let str_ = str.substr(str.indexOf('.') + 1);
      if (str_.indexOf('.') != -1) {
        str = str.substr(0, str.indexOf('.') + str_.indexOf('.') + 1);
      }
    }
    //正则替换
    // str = str.replace(/[^\d^\.]+/g, ''); // 保留数字和小数点
    str = str.replace(/[^\-?\d.]/g, '');
    str = str.replace(/\.\d{2,}$/, str.substr(str.indexOf('.'), 3));
    // if (limit / 1 === 1) {
    //   str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1'); // 小数点后只能输 1 位
    // } else {
    //   str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1'); // 小数点后只能输 2 位
    // }
    this.$set(this.tableData1, index, { ...row, agentMount: str });
    return str;
},

亲测好用,放心食用吧~

如果有需要数值相加可能会遇到相加结果小数点后面会出现很多位数
那是浮点计算的bug
直接使用toFixed(2)函数把结果保留小数点后两位就好啦

今天也是努力搬砖的小花🌸吖~
就酱!啾咪💜~

相关文章:

  • element-ui el-input “type=number“的上下箭头去掉
  • Element 中表格固定列后横向滚动条无法拖动
  • vue-DevTools安装
  • ‘webpack-dev-server‘ 不是内部或外部命令报错
  • 拾取文件夹
  • 听人聊天
  • 那个心底的欲望
  • 尝试RemotingSqlHelper的若干问题
  • 16进制与BYTE类型转换
  • jspSmartUpload上传下载全攻略
  • Jakarta-Common-BeanUtils研究心得(2)
  • 新生的 XInclude
  • 爱在哈佛
  • CVS的历史、功能、基本概念的介绍[转载]
  • .net流程开发平台的一些难点(1)
  • co.js - 让异步代码同步化
  • express + mock 让前后台并行开发
  • isset在php5.6-和php7.0+的一些差异
  • Javascript 原型链
  • JavaScript设计模式与开发实践系列之策略模式
  • PHP的类修饰符与访问修饰符
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • TypeScript实现数据结构(一)栈,队列,链表
  • vue自定义指令实现v-tap插件
  • 百度贴吧爬虫node+vue baidu_tieba_crawler
  • 基于组件的设计工作流与界面抽象
  • 配置 PM2 实现代码自动发布
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 跳前端坑前,先看看这个!!
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 追踪解析 FutureTask 源码
  • JavaScript 新语法详解:Class 的私有属性与私有方法 ...
  • 你学不懂C语言,是因为不懂编写C程序的7个步骤 ...
  • #每日一题合集#牛客JZ23-JZ33
  • $(selector).each()和$.each()的区别
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (九)c52学习之旅-定时器
  • (南京观海微电子)——COF介绍
  • (强烈推荐)移动端音视频从零到上手(上)
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • (转)四层和七层负载均衡的区别
  • .helper勒索病毒的最新威胁:如何恢复您的数据?
  • .h头文件 .lib动态链接库文件 .dll 动态链接库
  • .Net Core和.Net Standard直观理解
  • .Net的C#语言取月份数值对应的MonthName值
  • .NET建议使用的大小写命名原则
  • /bin、/sbin、/usr/bin、/usr/sbin
  • [ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
  • [ 蓝桥杯Web真题 ]-Markdown 文档解析
  • [2016.7 test.5] T1
  • [ACTF2020 新生赛]Include
  • [Asp.net MVC]Asp.net MVC5系列——Razor语法
  • [CQOI 2011]动态逆序对