vue elementui前端异步方法转同步记录

elementui的表单验证功能

表单验证方法如果传入回调函数时是异步的

// 子组件的方法
validateForm(){
      this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
        return {valid: valid, hints: hints}
      })
}

// 父组件调用,会发现校验结果,hints为undefine
submitAll(){
      this.$refs.resourceEditorRef.forEach((item, index) => {
        console.log(item.validateForm())
      })
}

修改成同步的

// 子组件方法
validateForm(){
      // this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
      //   return {valid: valid, hints: hints}
      // })
      // return new Promise((resolve, reject) => {
      //   this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
      //     resolve({valid, hints})
      //   })
      // })
      //或者根据官网文档说明可以不传入回调函数,直接validate
      return this.$refs.jsonEditor.getRef("form").validate
    },

// 父组件调用
submitAll(){
      // this.$refs.resourceEditorRef.forEach((item, index) => {
      //   console.log("校验结果", item.validateForm())
      // })
      this.$refs.resourceEditorRef.forEach(async (item, index) => {
        let {valid, hints} = await item.validateForm()
        console.info(valid, hints)
        console.log("校验结果", hints)
      })
}

但是其实上面 submitAll 的 forEach 是有问题, 需要改成传统的for遍历, 因为 forEach 的入参是一个回调函数 , 简单的说就是执行 forEach 后会马上执行forEach后面的代码

所以修改成普通的for , 使用普通 for 循环的时候有需要多包一层

// 子组件方法
validateForm(){
      //或者根据官网文档说明可以不传入回调函数,直接validate
      return this.$refs.jsonEditor.getRef("form").validate
    }

//父组件调用
submitAll(){
      (async () => {
        let submitAllForm = {};
        for (let index = 0; index < this.$refs.resourceEditorRef.length; index++) {
          const item = this.$refs.resourceEditorRef[index]
          await item.validateForm().then(res => {
            console.log("表单校验",res)
          }).catch(res => {
            console.log("表单校验catch",res)
            if(res == false){
              this.$message({ type: "error", message: "表单校验失败" });
              // 有一个校验失败则直接返回
              return;
            }
          })
        }
        //后续操作
        
      })()
}

或者

// 子组件方法
validateForm(){
      return new Promise((resolve, reject) => {
        this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
          resolve({valid, hints})
        })
      })
}

// 父调用
submitAll(){
      (async () => {
        let submitAllForm = {};
        for (let index = 0; index < this.$refs.resourceEditorRef.length; index++) {
          const item = this.$refs.resourceEditorRef[index]
          let {valid, hints} = await item.validateForm();
          console.log("表单校验valid",valid)
          console.log("表单校验hints",hints)
          debugger
        }
        //后续操作
        debugger
      })()
}