关于el-input输入增加格式化校验（千分号分割）

已于 2022-01-26 11:11:29 修改
阅读量1.4k 收藏
点赞数
文章标签： vue.js
于 2022-01-26 11:10:59 首次发布
原文链接：https://blog.csdn.net/xh_960125/article/details/114387755
版权

场景：需求要求input输入带有千位分隔符，用于elementUI （el-input）

解决：看到一篇很方便解决的文章记录在此

转载于：https://blog.csdn.net/xh_960125/article/details/114387755

高蓓蓓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,"); return str.length > 1 && str[1] ? `${n1}.${str[
el-input格式化数值，保留2位小数，实际为4位（不改变输入框中的实际值，仅改变显示的值）
m0_55000378的博客
11-08 5509
本文针对el-input金钱方面的格式化保留两位小数，实际为4位或更多。 1.格式化el-input，显示为2位小数，实际为4位，和利润率为83%,实际为0.83 最近公司在写一个年入几十亿的大项目，其中的涉及到钱方面，税率和利润率等等的加减乘除。 要求：文本框中显示10.77，数据库中显示为10.7692，数据库中保留4位小数，前端显示为2位小数，税率和利润率要求带上%符号。 大部分的el-input使用的都是v-model双向绑定，那么文本框的值改了为2位小数，数据库保存时候的值也会被改变，这时候一定要
input中数据格式为金额
最新发布
m0_68275786的博客
04-08 132
input中输入数据为金额格式，且保留两位小数。
vue element el-input格式化显示自定义指令；支持千分位格式化、百分比格式化，支持自定义格式化
qq_38571305的博客
04-01 5655
/ el-input格式化自定义指令/*** @msg: el-input格式化自定义指令* @param {Function} formatter 格式化函数* @param {Function} parser 解析函数* @param {Function} limit 输入限制函数* @param {Boolean} watchInput 是否监听input事件格式化显示* @param {Boolean} isNumber 是否为数字类型输入框（小数）
自定义Vue指令实现el-input格式化为保留两位小数
cfnwmp的博客
03-25 2859
<template> <el-input v-twoNum v-model="value1"> </el-input> </template> <script> export default { data() { return { value1: '' } }, directives: { twoNum: { update: function(.
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
limit-input-group -S 依赖element-ui/el-input-number 属性max：所有输入总和最低值min：所有输入总和最低值事件大于（newVal，overVal，maxVal）：当控件总和超过最小值参数解释newVal：当前输入的值overVal：剩余...
vue input 输入校验字母数字组合且长度小于30的实现代码
10-18
主要介绍了vue input 校验字母数字组合且长度小于30的实现代码，文章给大家补充介绍了在Vue.Js下使用el-input框只能输入数字并限制位数并且限制中文输入以及粘贴功能，感兴趣的朋友跟随脚本之家小编一起看看吧
element el-input 输入数字转化为千分位
高先生的猫
06-22 2936
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
el-input 实现实时输入数字转换千分位
阿铭的博客
12-21 2413
el-input 实现实时输入数字转换千分位 1、div部分 <el-input v-model="form4.rewardPointsTop" placeholder="请输入总上限积分" style="width: 400px" @input="handleThousand" ></el-input> <!-- oninput="value=value.replace(/[^\d]/g,'')" --> <
input 输入数字，el-tooltip中千分位展示input框的数字
Pink_Monkey的博客
12-22 895
要求： 鼠标滑过，input无值—-不显示el-tooltip框 input有值—-显示el-tooltip框 光标插入input框—-显示el-tooltip框 input框输入文字时—-显示el-tooltip框 input值，整数最长10位，小数最长10位的整数 /** 使用 */ <el-tooltip placement=“top-end” effect=“light” :manual=“true” ...
el-input 金额千分位自动分割
S475067285的博客
07-27 587
【代码】el-input 金额千分位自动分割。
vue自定义一个指令实现el-input-number组件显示千分号，但实际拿到的值是number类型
m0_50441807的博客
11-19 2481
下面先简单实现聚焦输入时是数字，失焦时展示千分号，但实际拿到的值也还是数字； 以上的例子可以实现把el-input-number绑定的初始值转化成千分号，也可以在失焦时转化千分号； 但是如果是通过调用接口获取数据，再赋值给el-input-number绑定的值，就不能实现页面刚加载就展示千分号；原因是因为inserted只在插入父节点时调用，只会执行一次，也就是在初始化页面的时候会调用一次，当数据更新后不会再调用，因此不能实现在数据更新后，转化为千分号；改变思路：使用update代替inserted，up
Element-Plus输入框设置千分位
zhs18331166003的博客
02-02 457
Element-Plus输入框设置千分位 Vue3 设置千分位
element输入框el-input之格式控制
kekexiaomayi的博客
03-17 2556
element输入框el-input之格式控制
el-input 分割成两部分分别验证
weixin_50999423的博客
10-09 844
效果图如下： <el-form ref="groupForm" :model="form" label-position="top" label-width="80px"> <el-form-item label="名称" prop="label" :rules=" [{ required:true, message: '名称不能为空'}]" ：required="true"&gt...
vue+elementUI的组件el-input、el-table的时间格式处理
weixin_45251189的博客
03-04 4710
引入moment.js，方便计算 import moment from 'moment' 一、对 el-table的处理 加入 formatter 属性 :formatter=“dateFormat” <el-table-column align="center" width="150" sortable :formatter="dateFormat" prop="createdDate" label="申请时间"> &l
vue el-table 行内el-input校验
03-27
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以将页面拆分成独立的、可复用的组件。el-table是Vue中的一个表格组件，而el-input是一个输入框组件。 在el-table中使用el-input进行行内校验的方法如下： 1. 首先，在el-table的每一行中使用el-input组件来渲染需要进行校验的单元格。 2. 在el-input上使用Vue的校验指令（如v-model和:rules）来实现校验功能。 3. 在Vue实例中定义校验规则，并将其应用到el-input上。 下面是一个示例代码： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"> <template slot-scope="scope"> <el-input v-model="scope.row.name" :rules="nameRules"></el-input> </template> </el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope"> <el-input v-model="scope.row.age" :rules="ageRules"></el-input> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 }, // ... ], nameRules: [ { required: true, message: '姓名不能为空', trigger: 'blur' }, // 其他校验规则 ], ageRules: [ { required: true, message: '年龄不能为空', trigger: 'blur' }, // 其他校验规则 ] }; } }; </script> ``` 在上述代码中，我们使用了el-table组件来展示数据，并在每一列中使用el-input组件进行编辑。通过给el-input组件绑定v-model指令，可以实现数据的双向绑定。同时，通过给el-input组件绑定:rules指令，可以定义校验规则。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值