el-table 嵌入数字输入框-校验只能输入数字，不能输入中文，不能输入负数，小数点可以是两位，大于5进1

已于 2024-04-17 14:38:56 修改
阅读量211 收藏
点赞数 3
文章标签： vue.js elementui javascript
于 2024-04-17 14:37:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38260470/article/details/137872512
版权 

<el-table-column label="金额(元)" align="center">
          <template slot-scope="scope">
            <el-input-number @blur="count()" @change="(currentValue) => {
              provinceMoneyMath(currentValue, scope.row.index);
            }
              " :precision="2" :controls="false" v-model="scope.row.rewardAmount"
              :disabled="type === '3' ? true : false"></el-input-number>
          </template>
</el-table-column>

勇气大爆炸
关注
Vue脚手架的elementui表格里面嵌套输入框
anfeikuang4030的博客
10-10 4267
<el-table :data="ruleLanguage" border style="width: 100%" highlight-current-row @selection-change="handleSelectionChange" @select-all="selectAll" @row-dblclick="doubleClick" @row-click...
el-input只允许输入数字和小数点并且小数点不能再首位，小数点后保留两位
weixin_44158799的博客
08-21 3897
el-input只允许输入数字和小数点并且小数点不能再首位，小数点后保留两位 上代码，“奖励金额”限制 <el-form class="form-container" ref="itemValue" :model="itemValue" :rules="rules"> <el-form-item style="margin-bottom: 40px;" prop="a_shop" label-width="100px" label="选择分销员">
VUE2 element-table里添加输入框并添加限制条件:只能是数字或者非负数
weixin_47194802的博客
10-11 1489
一般校验是加到表单里 的，我在表格外面尝试过加form表单，但是不太好用，因为我要做的是这个输入框只能输入正数和小数，不能汉字和字母负数，所以我就直接给输入框加了验证规则。关于在表格里面放输入框，并且给输入框加限制条件。虽然没有红色提示，但是直接过滤掉了非数字和负数。1、需要加验证的列 ，放上下面两句。
el-table表格中加入输入框
凡尘
09-14 3136
el-table表格中加入输入框。
el-table中插入输入框
凡尘
05-06 1185
el-table中插入输入框
el-table表格里输入，并且校验。$index undifine问题
最新发布
Jjacica的博客
05-30 484
el-form-item上加：:prop="'networkCardsList.' + scope.$index + '.interfaceName'" :rules="rules.interfaceName"：在 el-table外面套一层 el-form,引用 el-form的校验方式，但注意！el-form上加 :model="netForm" :rules="rules" ref="netForm"$index undifine ，因为少了el-form-item。
vue.js实现只能输入数字的输入框
10-16
首先，实现一个简单的只能输入数字的输入框可以通过在Vue实例的`watch`属性中监听输入数据的变化，并使用正则表达式`.replace()`方法去除所有非数字字符。正则表达式`\D`用于匹配任何非数字的字符，当用户输入时，这...
vue限制输入框只能输入8位整数和2位小数的代码
10-16
文章介绍的是一项在Vue框架中限制用户输入内容的实践，具体要求用户在输入框中只能输入最多8位的整数和最多2位的小数。这项功能在开发涉及金额、数值计算等场景时尤为常见，需要确保用户的输入是符合格式规定的数字...
vue element-ui实现input输入框金额数字添加千分位
10-15
这个正则表达式可以匹配不以0开头的数字、最多两位小数的金额格式。这个验证在实际使用中十分有用，能确保用户输入的格式正确。 4. 去除千分位中的逗号 `delcommafy`函数用于去除数字字符串中的千分位逗号。这一步...
VUE使用el-ui关于el-table添加输入框自定义校验（VUE专栏二）
weixin_40690763的博客
06-03 1416
如图所示，在table表中，输入框填入后提交，校验输入框 <template> <el-form :model="request" ref="request" :rules="rules" class="demo-ruleForm"> <el-table :data="request.prodlist" style="width: 100%;mar...
在element的表格中添加编辑（input，输入框）
weixin_44732821的博客
08-10 8114
基于Element上在table中实现行数据单选、编辑
el-table 中嵌入 el-input输入框 校验参数
AdleyTales的技术博客
09-16 4666
【代码】el-table 中嵌入 el-input输入框 校验参数。
el-input验证规则
ALDNOAH_K的博客
03-10 5316
rules: { people: [ { required: true, message: "请输入权重", trigger: "blur" }, { pattern: /^(?:0|[1-9][0-9]?|100)(\.[0-9]{0,2})?$/, message: "只能为0-100之间的整数", }, ], } 其他的input..
element table里的嵌入的input框设置只能输入英文和数字
baizong_zh的博客
09-27 2598
// el-input <el-input v-model="value1" oninput="value=value.replace(/[^0-9.]/g, '')" placeholder="请输入数字"></el-input> 没法加双引号 原因尚未弄清楚
表单输入框只能输入正整数
cflydk的博客
05-26 894
表单输入框只能输入正整数
el-table-column input输入框大小
吴灵辉的博客
03-19 2969
<el-table :data="xlxsArrayData" element-loading-text="Loading" stripe style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" > <el-table-column label="模型" width="2500p...
el-table点击单元格切换成可输入状态el-input，并且选中内容
weixin_51010848的博客
09-25 2025
【代码】el-table点击单元格切换成可输入状态el-input，并且选中内容。
使用elementui中的表格组件，在表头里面加入输入框。绑定了值，但是输入框输入不进去值。
qq_46266925的博客
04-29 3098
使用elementui中的表格组件其中的表头加入输入框，但是输入框的值输入不进去原因及解决方法
elementui中的tabel中使用input框实现表格数据编辑
m0_50441807的博客
04-26 5637
elementui中tabel组件点击编辑按钮后，里面的数据会变成一个input框，然后在input框中输入数据，即可完成表格的数据更新；
el-input使用replace只能有数字和负数且小数点后面保留四位小数并且小数点后面不能是小数点
07-13
如果你想在 `el-input` 组件中使用 `replace` 方法来限制只能输入数字、负数，并且小数点后最多保留四位小数，并且小数点后不能再输入小数点，你可以监听 `input` 事件，并在事件处理函数中进行相应的处理。下面是一个示例代码： ```html <template> <el-input v-model="inputValue" @input="handleInput"></el-input> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleInput() { // 替换非数字、非小数点、非负号的字符为空字符串 this.inputValue = this.inputValue.replace(/[^\d.-]/g, ''); // 限制小数点后最多四位小数 const decimalIndex = this.inputValue.indexOf('.'); if (decimalIndex !== -1) { const decimalPart = this.inputValue.substr(decimalIndex + 1); if (decimalPart.length > 4) { this.inputValue = this.inputValue.substr(0, decimalIndex + 5); } } // 移除多余的小数点 const dotCount = (this.inputValue.match(/\./g) || []).length; if (dotCount > 1) { this.inputValue = this.inputValue.replace(/\.$/g, ''); } } } }; </script> ``` 在这个示例中，我们在 `el-input` 组件上绑定了 `v-model`，将输入框的值与 `inputValue` 数据进行双向绑定。同时，我们监听了 `input` 事件，并在事件处理函数 `handleInput` 中对用户输入进行处理。 在 `handleInput` 方法中，我们首先使用正则表达式替换非数字、非小数点、非负号的字符为空字符串。然后，检查是否存在小数点，并且如果小数部分的长度超过了四位，则进行截断。最后，我们通过正则表达式匹配多余的小数点，并将其移除。 这样，用户在 `el-input` 文本框中输入的值就会自动进行限制，只能是数字、负数，并且小数点后最多保留四位小数，并且小数点后不能再输入小数点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值