【VUE实战问题记录】Vue 表格中回显时 el-input 的校验规则

前言

在表格中添加一个输入框，是现在很多项目中常用到的场景，本次是我在做项目时，需要回显数据，再次输入的数据要与原数据进行大小限制，按照原来的写法无法实现此功能。

1. 校验规则

在输入框中进行输入数字的时候，当输入框失去焦点，校验规则就会起作用（此处未使用改变时校验）

1.1 在data中创建校验规则：

data() {
    // 只能输入自然数,包括0，（包括两位小数）
    const validate = (str) => {
      return new RegExp('^[0-9]+(.[0-9]{1,2})?$').test(str)
    }

    const validateAmount = (rule, value, callback) => {
      const index = rule.field.split('.')[1]
      if (!validate(value)) {
        return callback(new Error('请输入自然数，最多两位小数'))
      } else if (Number(value) > this.dynamicValidateForm.list[index].number) {
        return callback(new Error('请输入小于或等于应付金额的数字'))
      } else if (Number(value) <= 0) {
        return callback(new Error('请输入大于0的数字'))
      } else {
        return callback()
      }
    }
    const RatioList = []
    return {
      dynamicValidateForm: {// 绑定数据
        list: RatioList,
      },
      rules: {
        numberRulesName: [
          { type: 'string', required: true, trigger: 'blur', validator: validateAmount },
        ],
      },
    }
  },

2. 规则分析（针对校验规则中的代码）

2.1 只能输入自然数,包括0，（包括两位小数，此处未校验0，可以优化后直接校验0，后面则就不要用if来校验了），其中正则表达式校验数字为：

// 只能输入自然数,包括0，（包括两位小数，此处未校验0，可以优化后直接校验0，则不需要）
    const validate = (str) => {
      return new RegExp('^[0-9]+(.[0-9]{1,2})?$').test(str)
    }

2.2 获取要操作数据（每行input中回显的数据）的角标：

    const index = rule.field.split('.')[1]

其中rule对象，获取的具体是什么内容呢？

{
    "type": "string",
    "required": true,
    "field": "list.0.number",
    "fullField": "list.0.number"
}

其中 field 和 fullField 可以获得当前input回显数据list.0.number，然后利用 rule.field.split('.')[1] 代码进行分割，就可以得到list集合中，角标为0的对象，数据属性为number的数据；

2.3 修改的数据（就是我们输入的内容）

const validateAmount = (rule, value, callback) => {}

value：为我们输入的数据内容，此时就可以利用原数据number和value新数据做对比；

3. 具体怎么使用？

在布局中具体的使用位置；

<el-form :model="dynamicValidateForm" :rules="rules" ref="form" inline>
      <two-table class="table-class" :data="dynamicValidateForm.list">
		<el-table-column prop="number" label="金额" min-width="140px">
          <template slot-scope="scope">
            <el-form-item
              :prop="'list.' + scope.$index + '.number'"
              :rules="rules.numberRulesName"
            >
              <el-input
                v-model="scope.row.number"
                style="width: 200px"
                placeholder="请输入金额"
                :disabled="isDisabled"
                class="group-inp"
              />
            </el-form-item>
          </template>
		</el-table-column>
      </two-table>
</el-form>

表中绑定的数据，与data中的定义的绑定数据对应；

dynamicValidateForm.list

其中 输入框与表格中的数据角标进行绑定；

:prop="'list.' + scope.$index + '.number'"

绑定的校验规则；

:rules="rules.numberRulesName"