<el-col> <el-form-item label="请求头:" label-width="1.5rem" prop="wen" > <div v-for="(domain1, indexDomain1) in form.askOption" :key="domain1.key" style="display: flex; margin: 0.0375rem 0" > <el-form-item :prop=" 'askOption.' + indexDomain1 + '.fristAskValue' " :rules="{ required: true, message: '不能为空', trigger: 'blur', }" > <el-input v-model="domain1.fristAskValue" size="small" style="width: 2rem" ></el-input> </el-form-item> <el-form-item :prop=" 'askOption.' + indexDomain1 + '.secondAskValue' " :rules="{ required: true, message: '不能为空', trigger: 'blur', }" > <el-input v-model="domain1.secondAskValue" size="small" style="width: 3rem; margin: 0 10px" ></el-input> </el-form-item> <el-button v-if="askFlag.indexOf(indexDomain1) < 0" type="success" icon="el-icon-plus" size="small" circle @click="addAsk(indexDomain1)" ></el-button> <el-button v-else type="danger" icon="el-icon-minus" size="small" circle @click="deleteAsk(indexDomain1, domain1)" ></el-button> </div> </el-form-item> </el-col>
// 增加请求头 addAsk(indexDomain1) { this.$refs.form.validateField( [ "askOption." + indexDomain1 + ".fristAskValue", "askOption." + indexDomain1 + ".secondAskValue", ], (valid) => { if (!valid) { this.validJudge = "ture"; // 动态赋值用于判断表单验证是否全通过 console.log(indexDomain1); } else { this.validJudge = "false"; console.log(666666); return; } } ); if (this.validJudge == "ture") { this.form.askOption.push({ fristAskValue: "", secondAskValue: "", key: Date.now(), }); this.askFlag.push(indexDomain1); } }, // 删除请求头 deleteAsk(indexDomain1, domain1) { var dele = this.form.askOption.indexOf(domain1); this.form.askOption.splice(dele, 1); this.askFlag.splice(indexDomain1, 1); }, },
菜鸟笔记,如有不妥之处,欢迎修正!