VUE实现动态添加表单，合并提交多个表单

1. 页面部分

<el-dialog title="新增备忘录" :visible.sync="formVisible" style="width: 2000px;margin-left: -10vh;">
   <el-form :model="item.formModel" v-for="(item,index) in saveFormList" :key="item.index"
            label-width="100px" class="demo-dynamic" ref="formRef">
       <el-row :gutter="24">
           <el-col :span="8">
               <el-form-item label="记录事项:" prop="recordItem"
                             :rules="[{ required: true, message: '记录事项不能为空', trigger: 'blur' }]">
                   <el-input v-model="item.formModel.recordItem" placeholder="请输入">
                   </el-input>
               </el-form-item>
           </el-col>
               <el-col :span="8">
                   <el-form-item label="计划执行时间:"  prop="execTimeStart"
                                 :rules="[{ required: true, message: '计划执行时间不能为空', trigger: 'blur' }]">
                       <el-date-picker v-model="item.formModel.execTimeStart" type="datetime" placeholder="请选择开始时间"
                                       value-format="yyyy-MM-dd HH:mm:ss" :picker-options="startDatePicker">
                       </el-date-picker>
                   </el-form-item>
               </el-col>
               <el-col :span="8">
                   <el-form-item label="至" prop="execTimeEnd"
                                 :rules="[{ required: true, message: '结束时间不能为空', trigger: 'blur' }]">
                       <el-date-picker v-model="item.formModel.execTimeEnd" type="datetime" placeholder="请选择结束时间"
                                       value-format="yyyy-MM-dd HH:mm:ss" :picker-options="endDatePicker(item.formModel.execTimeStart)">
                       </el-date-picker>
                   </el-form-item>
               </el-col>
       </el-row>
       <el-row :gutter="24">
           <el-col :span="8">
               <el-form-item label="设定系统提示时间:">
                   <el-date-picker v-model="item.formModel.sysNoticeTime" type="datetime" placeholder="请选择时间"
                                   value-format="yyyy-MM-dd HH:mm:ss" :picker-options="midDatePicker(item.formModel.execTimeStart, item.formModel.execTimeEnd)">
                   </el-date-picker>
               </el-form-item>
           </el-col>
           <el-col :span="2">
               <el-form-item label="置顶:">
                   <el-checkbox
                           class="ontop-checkbox"
                           v-model="item.formModel.onTop"
                           @change="setOnTopVal"
                           true-label="1"
                           false-label="0">
                   </el-checkbox>
               </el-form-item>
           </el-col>
           <el-col :span="4">
               <el-form-item label="">
                   <el-button type="primary" @click="addNextMemo">继续添加备忘录</el-button>
               </el-form-item>
           </el-col>
           <el-col :span="4">
               <el-form-item label="">
                   <el-button type="primary" @click="delMemo">删除备忘录</el-button>
               </el-form-item>
           </el-col>
       </el-row>
   </el-form>
   <br/>
   <div style="width: 100%; text-align: center; padding-top: 20px">
       <el-button type="primary" @click="saveForm">保存</el-button>
       <el-button @click="toBack()">返回</el-button>
   </div>
</el-dialog>

2. js部分

data{
	saveFormList: [
               {
                   formModelName: "formModel1",
                   formSequence: 1,
                   formModel: {
                       recordItem: "",
                       execTimeStart: null,
                       execTimeEnd: null,
                       sysNoticeTime: null,
                       onTop: 0
                   },
               }
           ],
}

methods: {
	saveForm() {
         let refArr = this.$refs.formRef;
         let num = 0;
         refArr.forEach((function (item, index) {
             item.validate((valid) => {
                 if (!valid) {
                     num = num+1;
                     console.log('error submit!!');
                 }
             });
         }))

         if(num >0){
             return false;
         }
         let memoList = this.formMemoList;
         this.saveFormList.forEach(function (item, index) {
             memoList.push(item.formModel);
         })
         saveMemo(this.formMemoList).then((data) => {
             if (data.state) {
                 this.$message({type: 'success', message: '添加成功'});
                 //两个异步调用，改为顺序执行
                 this.loadTableData();
             }
         });
         this.formVisible = false;
         //赋值为空
         this.emptySaveFormList();
     },
}

addNextMemo() {
       this.formCount += 1;
       let item = {};
       item.formModelName = "formModelName" + this.formCount;
       item.formSequence = this.formCount;
       item.formModel = {
           recordItem: "",
           execTimeStart: null,
           execTimeEnd: null,
           sysNoticeTime: null,
           onTop: 0
       }
       this.saveFormList.push(item);
       //console.log(this.$refs.formRef.length)
   },
   delMemo() {
       if (this.formCount == 1) {
           return
       }
       this.saveFormList.some((item, i) => {
           if (item.formSequence == this.formCount) {
               this.saveFormList.splice(i, 1)
               return true;
           }
       })
       this.formCount -= 1;
   },

日期范围限制

beginDate(){
   const self = this
   console.log("self"+self.form)
   let oneDay = 1 * 24 * 60 * 60 * 1000 ;// 设定1天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 1天的时间戳
   return {
       disabledDate(time){
           return time.getTime() <= Date.now() - oneDay; //开始时间不选时，结束时间最大值小于等于当天
       }
   }
},
endDatePicker(startTime){
   const  self = this
   return {
       disabledDate(time) {
           if (startTime != null) {
               //如果开始时间不为空，则结束时间大于开始时间
               return new Date(startTime).getTime() > time.getTime();
           } else {
               return time.getTime() < Date.now(); //开始时间不选时，结束时间最大值小于等于当天
           }
       }
   }
},
midDatePicker(startTime, endTime){
   const  self = this
   return {
       disabledDate(time) {
           if (startTime != null && endTime != null) {
               return time.getTime() < new Date(startTime).getTime() || time.getTime() > new Date(endTime).getTime();
           } else {
               return time.getTime() < Date.now();
           }
       }

   }
},