项目中经常会用到动态添加表单项的功能
一般遇到这个功能,我们必须要考虑到一些问题:
- 验证前面是否有空项,有空则不能继续添加,并作出验证提示;
-
添加项可以删除,但必须至少保留一项
因为是动态添加表单项,所以这个表单项肯定是个数组,每项包含两个属性,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)
}
最终效果