vue + elementUI 动态添加表单项，并验证

项目中经常会用到动态添加表单项的功能

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