表格校验数字(收料数量不能大于采购数量与下单数量的差值)
-
今天遇到一个表格校验当前行数据,且对当前行数据进行 “数字并且进行比较”的校验;
-
下面将截图显示之前的校验(用el-form中的prop和rules写的校验)存在一些问题
-
之前用的是el-form中的prop和rules结合进行校验,但因为存在bug(切换分页时,第一页第一行数据的校验会影响到第二页第一行数据的校验);所以改用elementui官网中的error属性
-
将展示 用error属性写的代码
html代码:
<!-- 请购数量+已请购数量不能大于需求数量 -->
<el-table-column label="请购数量" align="center" min-width="250px" prop="requireAmount">
<!-- <template slot="header">
<span>
请购数量
<el-tooltip placement="top" effect="light">
<div slot="content">请购数量不能大于需求数量与已请数量的差值</div>
<el-button class="ml10" type="text" size="medium" icon="el-icon-question"></el-button>
</el-tooltip>
</span>
</template>-->
<template slot-scope="scope">
<el-form-item style="padding-top: 25px" :error="scope.row.requireAmountError">
<el-input
size="mini"
type="number"
clearable
v-model="scope.row.requireAmount"
@blur="requireAmountValidate(scope.row)"
/>
</el-form-item>
</template>
</el-table-column>
js代码:
/***************** table 表单验证 ************************/
// 请购数量验证
requireAmountValidate(row) {
var pattern = /^[0-9]+([.]\d{1,2})?$/
this.$set(row, 'requireAmountError', null)
if (row.requireAmount > row.count - row.alRequireSum) {
this.$set(
row,
'requireAmountError',
'不能大于需求数量与已请购数量的差值'
)
} else if (
row.requireAmount <= 0 ||
row.requireAmount == null ||
row.requireAmount == ''
) {
this.$set(row, 'requireAmountError', '采购数量不能为空或小于0')
} else if (!Number.isInteger(row.requireAmount)) {
if (!pattern.test(row.requireAmount)) {
this.$set(row, 'purchaseAmountError', '小数位数不能大于2位')
}
} else {
this.$set(row, 'requireAmountError', null)
}
},
5.最后提交时,调取后端接口 要对整个列表数组做循环,如果 item.requireAmountError==null,就是通过验证,item.requireAmountError!=null 则item.requireAmountError会抛出校验提示信息
if (this.tableForm.tableData.length != 0) {
this.tableForm.tableData.forEach((item, index) => {
this.requireAmountValidate(item)
if (item.requireAmountError != null) {
throw new Error('请检查表格是否填写完成')
} else {
this.titleFormValidT = true
console.log(item.requireAmountError, this.titleFormValidT, '002')
}
})
}
出效果图:
直到通过校验再去调取后端接口
以上就是全部~