v-for dynamic data loop form validation

v-for dynamic data loop form validation,
prop is dynamic validation,
each item must be added: rules="rules.docName"

 <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      size="mini"
    >
      <div v-for="(item, index) in form.fileList" :key="index" class="bgWrap">
        <el-button
          size="small"
          icon="el-icon-delete"
          type="danger"
          plain
          class="deleteBtn"
          @click="deleteDetail(index)"
        >
          删除
        </el-button>
        <el-form-item
          :label="`附件${index + 1}上传:`"
          :prop="'fileList.' + index + '.docName'"
          style="width: 54%"
          :rules="rules.docName"
        >
          <span @click="touchIndex(index)">
            <el-upload
              ref="uploadFileRef"
              action
              :auto-upload="true"
              :limit="1"
              :file-list="filesList[index]"
              :before-upload="beforeTheFileUploaded"
              :on-exceed="handleExceed"
              :on-change="uploadChange"
            >
              <template #default>
                <el-button slot="trigger" size="small" icon="el-icon-upload2">
                  上传文件</el-button
                >
                <span iv slot="tip" class="el-upload__tip">
                  只能上传 pdf/jpg/jpeg 文件,且不超过10M
                </span>
              </template>
            </el-upload>
          </span>
        </el-form-item>
        <el-form-item label="文件说明:">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="item.remark"
            maxlength="1000"
            show-word-limit
            style="width: 50%"
          />
        </el-form-item>
      </div>
    </el-form>
data() {
    return {
      title: '',
      filesList: [],
      touchIndexFlag: '',
      form: {
        topic: null,
        signFlag: false,
        fileList: [{ docName: '', docKey: '', fileSize: '', remark: '' }]
      },
      rules: {
        topic: [{ required: true, message: '请输入主题', trigger: 'blur' }],
        signFlag: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        docName: [
          {
            required: true,
            message: '请上传文件',
            trigger: 'change'
          }
        ]
      }
    }

Rules for each subscript : prop="'fileList.' + index + '.docName'"
Insert image description here

![Insert image description here](https://img-blog.csdnimg.cn/b6d99489b0a2410b9e09ab25820b2bc4.png

Guess you like

Origin blog.csdn.net/weixin_43400431/article/details/126145646