element-ui中使用动态form表单验证

使用背景

在使用element-ui开发中，经常会用到对动态创建的表单进行字段验证，比如新增多个类似卡片的表单，里面的字段需要做验证，此时就要使用到动态表单验证，官方文档写的有示例，但是不够清晰。

部分代码演示

下面以实际项目中的代码为例，里面为了自适应el-col代码可以忽略：

<el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small" style="width: 90%;">
      <div v-for="(item, index) in form.list" :key="item.id" class="box-card">
        <el-row :gutter="20">
          <el-col :lg="12" :md="12" :sm="24" :xl="8" :xs="24">
            <el-form-item :prop=" 'list.' + index + '.maintUnit'" :rules="rules.maintUnit" label="运维单位">
              <SearchOpsDepartment :value.sync="item.maintUnit"></SearchOpsDepartment>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :sm="24" :xl="8" :xs="24">
            <el-form-item :prop=" 'list.' + index + '.userId'" :rules="rules.userId" label="运维人员">
              <SearchUsers :value.sync="item.userId"></SearchUsers>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="text-align: right;">
            <el-button type="text" @click="handleAdd">添加</el-button>
            <el-button v-if="index !== 0" type="text" @click="handleDelete(index)">删除</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>

data() {
        return {
            form: {
                list: [{ id: Date.now() }] // 这里添加了一个当前时间戳作为循环使用的key，如果使用index作为key，虽然避免的报错，但是对性能没有什么帮助，而且可能增加新能问题。
            },
            rules: {
                maintUnit: [
                    {
                        required: true,
                        message: '运维单位不能为空！',
                        trigger: ['change', 'blur']
                    }
                ],
                userId: [
                    {
                        required: true,
                        message: '运维人员不能为空！',
                        trigger: ['change', 'blur']
                    }
                ]
            }
        }
    }

注意重点

• form表单里的 :model="form" :rules="rules"model和rules不能省略，而且这个model必须是个对象，虽然在当前例子里，我们的数据form其实就是一个数组，但是还要包裹一层成对象。
• 每一项绑定prop时，一定要按照:prop=" 'list.' + index + '.maintUnit'"这种格式，list是需要循环的数组key名，一定不要写成form.list，也不是循环出的每一项item，index是每项的下标，maintUnit是当前字段key值。
• 每一项必须单独绑定验证规则，如例子中的:rules="rules.maintUnit"
• prop和当前字段的key值要保持一致，无论是动态表单还是静态表单都要保持一致