vue2动态增删表单+表单验证
实现效果
<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:'',// id
weight:'',//数量
}
],
},
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();
});
}
})
}
});
},