实现vue3 element-plus form组件 validate 同步校验返回

其实比较简单，因为 validate方法 返回的是 Promise，所以利用async await 就可以实现啦。

子组件

抛出submit 方法

校验失败时，await this.$refs.form.validate(); 直接抛出异常，程序不往下走；

校验成功时，继续执行下面的代码

    async submit() {
      // 验证表单
      // 校验失败时，直接抛出异常，程序不往下走；
      // 校验成功时，继续执行下面的代码
      await this.$refs.form.validate();

      const data = Object.assign({}, this.form);
      data.variableType = this.form.variableType;
      if (this.form.variableType == 'other') {
        data.variableType = this.variableTypeInput;
      }

      return data;
    }

父组件

调用子组件方法，并获取返回值

    // 修改变量框提交
    async changeVariable(){
      const result = await this.$refs.variableDialog.submit();
      if (result) {
        var temp = {};
        Object.assign(temp, result);

        var data = JSON.parse(JSON.stringify(this.variableList));
        if (this.variableIndex == -1) {
          data.push(temp);
        } else {
          data[this.variableIndex] = temp;
        }

        //校验表格数据
        if (!this.checkData(data)) {
          this.$message.error('变量名称重复！');
          return false;
        }

        this.variableList = data;

        // 关闭窗口
        this.$refs.variableDialog.showDialog = false;
      }

    },