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'"