Vue 大表单拆分验证

最近开发项目过程中，遇到一个表单将近150个字段，在这里将表单进行拆分，方便日后开发维护，大家有更好的方法，欢迎评论区指导

1. 首先将大表单按照业务拆分成不同的小表单，每个小表单对外提供一个提交方法，返回Promise对象，这个项目用的是 Element Form

submit() {      
  return new Promise((resolve, reject) => {       
     this.$refs.elForm.validate((validate, error) => {          
        if (validate) {            
          //如果验证失败返回成功，并把当前组件的表单数据返回
          resolve({ this.formData });         
        } else {
          //如果验证失败，返回当前页面 标题对应的滚动位置，这块也可以是error对象
          reject(this.errorTop(this.scrollObj, Object.keys(error)[0]));          
        }      
      });     
   });    
 }

2. 父组件中，promise.all 方法，调用每个组件的 submit 方法，代码如下：

// 提交总方法   
submit() {
  //这 把所有 子组件的 submit方法 组成个数组   
  const promises = [        
    this.$refs.VillageIncomeExpenditureForm.submit(), //1        
    this.$refs.VillageAssetsForm.submit(),//2      
  ];
  //这你调用 promise.all 方法   
  Promise.all(promises).then((data) => {
    let subForm = {};//这你是提交的数据
    //把各个子组件表单数据循环赋值
    data.forEach((item) => {            
      Object.assign(subForm, item);          
    });          
    // 这你调用函数 提交数据 省略...
  }).catch((top) => {//捕获异常事件页面跳转位置; 
     this.$message.warning("请检查所填信息!");    
     if (top != null) {            
       this.scrollBody.scrollTop = top;          
     }        
  });    
},

有对Promise方法不了解的 可以 去看一下 阮一峰老师的讲解。