实现el-table表格每一行输入框之间的数字校验比较

表格校验数字（收料数量不能大于采购数量与下单数量的差值）

1. 今天遇到一个表格校验当前行数据，且对当前行数据进行 “数字并且进行比较”的校验；

2. 下面将截图显示之前的校验（用el-form中的prop和rules写的校验）存在一些问题

3. 之前用的是el-form中的prop和rules结合进行校验，但因为存在bug（切换分页时，第一页第一行数据的校验会影响到第二页第一行数据的校验）；所以改用elementui官网中的error属性

4. 将展示 用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')
            }
          })
        }

出效果图:

直到通过校验再去调取后端接口
以上就是全部~