element 遍历出来的的表单验证

@ZhaoYunyao

已于 2023-04-12 13:27:18 修改

阅读量101

点赞数

文章标签： vue.js javascript 前端 elementui

于 2023-04-10 11:44:33 首次发布

本文链接：https://blog.csdn.net/weixin_44177413/article/details/130056455

版权

做项目遇到这种情况

表单内容是遍历出来的一直过不了验证

        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="(item, index) in form.moduleCreateReqVOList"
            :key="index"
          >
            <span style="margin-left: 42px">{{ item.moduleName }}</span>
            <el-form-item label="到期时间" :prop='`moduleCreateReqVOList.${index}.endTime`' :rules="[{required: true,message: '到期时间不能为空',trigger: 'blur',}]">
              <el-date-picker
                v-model="item.endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

数据格式是这样的注意一定要写在form表单里面

data(){
    return {
        form: {
            moduleCreateReqVOList: [
              { moduleName: "数据管理", endTime: "", moduleId: 1 },
              { moduleName: "数据管理", endTime: "", moduleId: 1 },
            ],
        }
    }
}

最终效果