Element中v-for动态数据循环表单验证的处理

1.功能需求

如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？

2.Dom结构如下

表单验证的时候：

1. prop改为 ：prop，形式为’List.’+index+’.startDate’
2. List.’+index+’.startDate就是数据结构与数据
3. 每一个循环中的都需要加：rules

    <el-form :model="resumes" size="mini" :rules="rules" ref="resumes">
      <div v-for="(item, index) in resumes.List" :key="index">
        <el-form-item label="开始时间：" :prop="'List.'+ index +'.startDate'" :rules="rules.startDate">
          <el-input v-model="item.startDate" size="mini" />
        </el-form-item>
        <el-form-item label="结束时间：" :prop="'List.'+ index +'.endDate'" :rules="rules.endDate">
          <el-input v-model="item.endDate" type="password" />
        </el-form-item>
        <el-form-item label="手机号：" :prop="'List.'+ index +'.phone'" :rules="rules.phone">
          <el-input v-model="item.phone" size="mini" />
        </el-form-item>
      </div>
    </el-form>

3.data结构如下：rules为个表单项的验证规则

    data() {
      return {
        resumes: {
          List: [{
            startDate: '',
            endDate: '',
            phone: ''
          }]
        },
        rules: { // 添加校验
          startDate: [{
            required: true,
            message: '请输入开始时间',
            trigger: 'blur'
          }],
          endDate: [{
            required: true,
            message: '请输入结束时间',
            trigger: 'blur'
          }
          ],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
        },
      };