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();
              });
            }
          })
        }
      });
    },