项目中经常会用到动态添加表单项的功能
QQ截图20210923093405.jpg
一般遇到这个功能，我们必须要考虑到一些问题：
- 验证前面是否有空项，有空则不能继续添加，并作出验证提示；
-
添加项可以删除，但必须至少保留一项
QQ截图20210923093015.jpg
因为是动态添加表单项，所以这个表单项肯定是个数组，每项包含两个属性，sectionId和preFileId
formData: {
sections: [{sectionId: '', preFileId: ''}]
},
rules: {
required: [{ required: true, message: '此项不能为空'}]
},
主体代码
<el-row v-for="(section, index) in formData.sections" :key="index">
<i @click="delSection(index)" class="el-icon-delete btn-delete" v-if="formData.sections.length > 1"></i>
<el-col :span="12">
<el-form-item :label="'公告关联标段' + (+index +1)" :prop="'sections.' + index + '.sectionId'" :rules="rules.required">
<el-select v-model="section.sectionId" placeholder="请选择标段" style="width: 100%;">
<el-option v-for="item in sectionsList" :key="item.id" :label="item.label" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="'资格预审文件' + (+index +1)" :prop="'sections.' + index + '.preFileId'" :rules="rules.required">
<el-select v-model="section.preFileId" placeholder="请选择预审文件" style="width: 100%;">
<el-option v-for="item in preFileList" :key="item.id" :label="item.label" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="formData.sections.length < 6">
<el-col :span="24" style="text-align: right;">
<el-form-item label="" >
<el-button @click="newSection()" type="primary" plain icon="el-icon-plus" style="display: block;width: 100%;">新增标段</el-button>
</el-form-item>
</el-col>
</el-row>
新增动作，这里用elementUI的表单项验证方法 validateField()，方法接收参数可以是数组，该方法会依次验证数组中每个表单项，也就是对应的prop值，这里要注意，循环项的prop格式为 :prop="'sections.' + index + '.preFileId'"。
但是validateField()方法每验证通过一次就会执行一次回调，我们这里需要的是全部通过验证才执行回调，所以更改如下：
/**
新增标段
*/
newSection() {
const { sections } = this.formData
let flag, validateFieldArrs = [];
sections.forEach((sec, index)=> {
//部分验证validateField接收的参数格式：['list.0.id', 'list.1.id']
validateFieldArrs.push(`sections.${index}.sectionId`, `sections.${index}.preFileId`)
if (sec.sectionId && sec.preFileId) {
flag = true
} else {
flag = false
}
})
if (flag) {
//全部验证通过执行新增
this.formData.sections.push({sectionId: '', preFileId: ''})
} else {
//验证指定表单
this.$refs['formData'].validateField(validateFieldArrs)
}
},
/**
删除标段
@params {Number} index 删除数据索引
*/
delSection(index) {
this.formData.sections.splice(index, 1)
}
最终效果
QQ录屏202109231056332021923116292.gif
