element ui 中循环列表的表单怎么校验（v-for动态绑定的数据)_循环绑定v-model 添加校验

在vue项目中，使用element-ui的表单校验能节省很多时间，简单的对象表单校验，很简单，使用prop属性就可以直接校验。但是，如果表单项里有通过v-for动态生成的数组对象，又该怎么设置验证呢？

1、总结：

1) v-for要遍历的数组dynamicItem

  // 字典维护表单
      dictMaintainForm: {
        dynamicItem: [
          {
            typeId: this.$route.query.typeId,
            code:this.$route.query.code,
            selectOne: "",
            selectOneNumber: ""
          }
        ]
      },

2) 表单验证规则

 // 表单验证
      dictMaintainFormRules: {
        selectOne: [
          { required: true, message: "请输入选项值名称", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        selectOneNumber: [
          { required: true, message: "请输入选项值编号", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" }
        ]
      }

template示例：

    <div v-for="(item, index) in dictMaintainForm.dynamicItem" :key="index">
        <el-form-item
                label-width="140px"
                label="选项值:"
                :prop="'dynamicItem.' + index + '.selectOne'"
                :rules="dictMaintainFormRules.selectOne"
              >
                <el-input
                  v-model="item.selectOne"
                  placeholder="请输入选项值名称"
                ></el-input>
            </el-form-item>
            <el-form-item
                :prop="'dynamicItem.' + index + '.selectOneNumber'"
                :rules="dictMaintainFormRules.selectOneNumber"
              >
                <el-input
                  placeholder="请输入选项值编号"
                  v-model="item.selectOneNumber"
                ></el-input>
              </el-form-item>
</div>