实现效果
<el-form>
<el-form :model="dataForm" :rules="dataRule" ref="dataForms" :label-width="formLabelWidth"><div class="select-box" v-for="(item, index) in dataForm.feedFormulaItems" :key="index" :value="item.key" ><el-form-item label="配方材料" :prop="'feedFormulaItems.'+[index]+'.externalId'" class="red-label" :rules="dataRule.externalId" ><div class="Vehicle-model"><el-select v-model="item.externalId" clearable placeholder="请选择配方材料"><el-option v-for="items in amountlist" :key="items.id" :value="items.id" :label="items.name"></el-option></el-select></div></el-form-item><div class="input" ><el-form-item :prop="'feedFormulaItems.'+index+'.weight'" :rules="dataRule.weight"><el-input v-model="item.weight" placeholder="重量(千克)" clearable></el-input><i class="el-icon-remove" @click="removeDomain(item,index)" v-if="index !=0"></i><i class="el-icon-circle-plus-outline" @click="addFormItem" v-else></i></el-form-item></div></div></el-form>
</el-form>dataForm: {feedFormulaItems: [{externalId:'',// idweight:'',//数量}], },
dataRule: {externalId: [{ required: true, message: '配方材料不能为空', trigger: ["change",'blur'] }],weight: [{ validator: this.validate, trigger: 'blur' }],
},定义自定义验证
validate (rule, value, callBack){let reg =/^(0|[1-9]\d{0,11})(\.\d{1,4})?$/;if (value === undefined || value === "") {return callBack(new Error("重量不能为空必填"));} else if (!reg.test(value)) {return callBack(new Error("重量只能为正数或小数，最多4位小数"));}return callBack();},// 添加一个新的表单项数据对象addFormItem() {let flage = true;this.dataForm.feedFormulaItems.map((item,index)=>{if(!item.externalId || !item.weight){this.$message.error(`请将配方材料中第${index+1}行的配方材料或重量填写完整`);flage = false}})if(!flage){return }this.dataForm.feedFormulaItems.push({ externalId: this.dataForm.feedFormulaItems.externalId, weight:this.dataForm.feedFormulaItems.weight });},// 点击删除添加一个新的表单项数据对象removeDomain(item, index) {this.dataForm.feedFormulaItems.splice(index, 1);},// 表单提交 进行双层校验dataFormSubmit () {this.$refs["dataForm"].validate(valid => {if (valid) {// 表格规则验证this.$refs["dataForms"].validate(valids => {if (valids) {const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(255, 255, 255, 0.5)'});addformula(this.dataForm).then(response => {this.$modal.msgSuccess("新增成功");this.visible = false;this.$emit('refreshDataList')loading.close();}).catch(() => {loading.close();});}})}});},
