vue实现一行多列的表单校验

背景：在开发过程中，经常会遇到一行多列的情况，并且需要做表单校验，element文档给的required案列是单列输入框，使用场景不符合动态一行多列验证

第一种方式：一个表单，循环多行

代码：

 <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="参数值" v-for="(item, index) in form.locationParamList">
        <el-col :span="24" >
          <el-col :span="6">
            <el-form-item :prop="'locationParamList.' + index + '.x'" :rules="rules.x" style="margin-right: 7px">
              <el-input v-model="item.x" placeholder="请输入X坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :prop="'locationParamList.' + index + '.y'" :rules="rules.y" style="margin-right: 7px">
              <el-input v-model="item.y" placeholder="请输入Y坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :prop="'locationParamList.' + index + '.pageNum'" :rules="rules.pageNum" style="margin-right: 7px">
              <el-input v-model="item.pageNum" placeholder="请输入页码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="danger" v-if="index !== 0"  @click="deleteRow(index)">删除</el-button>
            <el-button type="success" v-if="index === 0" @click="addRow()">添加</el-button>
          </el-col>

        </el-col>

      </el-form-item>
    </el-form>

 data(){
    return {
      title: "坐标参数配置",
      form: {
        locationParamList: [
          {
            x: '',
            y: '',
            pageNum: '',
          }
        ],
      },
      rules: {
        x: [
          {required: true, message: "X坐标不能为空", trigger: 'change'},
        ],
        y: [
          {required: true, message: "Y坐标不能为空", trigger: 'change'},
        ],
        pageNum: [
          {required: true, message: "页码不能为空", trigger: 'change'},
        ]
      }
    }
  },

效果：

 注意：

 如果遇到这个报错，原因可能为：

 

 循环的list不在form里面，在其他开发的时候也会单独写一个对象去循环，貌似也没出错，但是当el-form-item是循环出来的，貌似必须放在form下，当时找了好久问题，特记录下

第二种方式：循环多个表单，即原先的一行现在定义为一个表单

代码：

<el-form :ref="'locationParamList' + index" :rules="rules" v-for="(item, index) in locationForm.locationParamList" :model="locationForm" label-width="80px">
      <el-form-item label="参数值" >
        <el-col :span="24" >
          <el-col :span="6">
            <el-form-item prop="x" style="margin-right: 7px">
              <el-input v-model="item.x" placeholder="请输入X坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="y" style="margin-right: 7px">
              <el-input v-model="item.y" placeholder="请输入Y坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="pageNum" style="margin-right: 7px">
              <el-input v-model="item.pageNum" placeholder="请输入页码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="danger" v-if="index !== 0"  @click="deleteRow(index)">删除</el-button>
            <el-button type="success" v-if="index === 0" @click="addRow()">添加</el-button>
          </el-col>

        </el-col>

      </el-form-item>
    </el-form>

 data(){
    return {
      title: "坐标参数配置",
      form: {
        locationParamList: [
          {
            x: '',
            y: '',
            pageNum: '',
          }
        ],
      },
      rules: {
        x: [
          {required: true, message: "X坐标不能为空", trigger: 'change'},
        ],
        y: [
          {required: true, message: "Y坐标不能为空", trigger: 'change'},
        ],
        pageNum: [
          {required: true, message: "页码不能为空", trigger: 'change'},
        ]
      }
    }
  },

 submitForm:function() {
      let resultList = []
      let that = this
      function check(name){
        let result = new Promise((resolve, reject) => {
          that.$refs[name][0].validate(valid => {
            if (valid) {
              resolve(true)
            }else{
              reject()
            }
          })
        })
        resultList.push(result)
      }

      for(let i = 0; i < this.locationForm.locationParamList.length; i++){
        check('locationParamList' + i)
      }
      Promise.all(resultList).then(res => {
       // 提交后台
      }).catch(e => {
      })

循环处理每个表单的校验，校验完成之后再回调提交后台，结果也如上图所示