element el-form-item循环校验

前言

使用场景：批量添加是做表单验证

代码示例

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可
html

<div v-for="(person,index) in Form.List">
    <el-form-item :prop="'List['+index+'].code'" :key="person.key" :rules="rules.code">
        <el-input v-model="person.code">el-input>
    el-form-item>
    <el-form-item :prop="'List['+index+'].name'" :rules="rules.name">
        <el-input v-model="person.name">el-input>
    el-form-item>
div>

js
验证规则

rules:{
   code:[
     { required: true, message: 'Please input code', trigger: 'blur' },
   ],
   name:[
     { type: 'date',required: true, message: 'Please input name',trigger: 'blur',},
   ],
}

注意
如果el-form-item 设置 prop 报错：please transfer a valid prop path to form item!
官方解释：https://github.com/ElemeFE/element/issues/2327

el-form-item 里面的循环prop名字，需要 和form中list的名字一致，这样才能确保组件的统一性。
我此处循环的是Form.List，那么prop中就要写List[index].xxx