用的element表单生成器
//生成器插件部分源码
submitForm() {
this.$refs[this.formConf.formRef].validate(valid => {
if (!valid) return false
// 触发sumit事件
this.$emit('submit', this[this.formConf.formModel])
return true
})
}
<template>
<div>
<parser
v-if="isDataReady"
:form-conf="formConf"
ref="parser"
@submit="currFormSubmit"
/>
</div>
</template>
<script>
import Parser from "form-gen-parser";
import {
designDetail,
formSave,
} from "../../../../api/formGenerator/api_formGenerator";
import { buildingOnLandSave } from "@/api/landBuild/yd.js"
export default {
components: {
Parser,
},
data() {
return {
formConf: null,
refName: "parser",
testData: null,
isDataReady: false,
formPerData: null,
formModel: null, //当前表单标识
formRef: null, //当前表单名称
valid: false,//当前表单是否通过验证
};
},
mounted() {
this.designDetail()
},
methods: {
designDetail() {
designDetail({ formId: "6afef2143e229a999920d89a365c3402" }).then((res) => {
if (res.code == 0) {
this.formConf = JSON.parse(res.data.formDesign.setup);
this.isDataReady = true;
this.formPerData = res.data.formDesign;
this.$nextTick(() => {
this.$emit('getCode', this.findAreaCode());
})
}
})
},
submitForm() {
//表单验证
this.$refs.parser.submitForm();
console.log(this.valid)
this.$nextTick(() => {
console.log(this.valid)
if (!this.valid) {
this.$message.error('表单信息未填写或格式错误,请重新填写!')
return [];
}
let formdata = this.$refs.parser[this.formModel];
/**测试数据 */
formdata.xzqdm = '36072310620701';
return [formdata, this.$refs.parser.formConfCopy];
})
},
//parser submit
currFormSubmit() {
this.valid = true;
},
},
};
</script>
假设表单验证通过
问: 第二页submitForm方法中的console打印结果?为什么?
为啥要这么做,element的表单验证方法是一个promise,你完全可以在子组件的提交的方法里面直接return 整个验证方法,外层能够接到一个promise对象的,
就算不用这种你也可以在调用子组件的对象的时候,传入一个函数,子对象内部校验通过后调用回调。
看懂你想干嘛了 你这写法真的水 很多冗余代码而且不一定走预期结果 Promise了解一下