父组件
<FormApproval ref="myChild" @fatherMethod="fatherMethod" />
async fatherMethod() {
const valid = await this.$refs.myChild.validate(); // 先调用子组件的validate方法,判断表单是否有效
valid ? this.msgSuccess('123审批成功!') : this.msgError('error submit!!')
},
子组件
<template>
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
<el-form-item label="Approval status" prop="status">
<el-radio-group v-model="form.status">
<el-radio label="0">Pass</el-radio>
<el-radio label="1">Fail</el-radio>
</el-radio-group>
</el-form-item>
<!-- Fail 不通过 说明原因-->
<el-form-item v-if="form.status === '1'" label="Reason" prop="explain">
<el-input
v-model="form.explain"
type="textarea"
placeholder="Please explain why"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">Submit for approval</el-button>
<el-button type="text" class="colorDanger" @click="reset">Cancel</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "FormApproval",
// props: {
// form: Object,
// items: Array,
// },
data() {
return {
form: {},
rules: {
status: [
{ required: true, message: "Please select approval status", trigger: "blur" }
],
explain: [
{ required: true, message: "Please enter a description", trigger: "blur" }
]
}
};
},
mounted() {
},
methods: {
// 审批
submit() {
this.$emit('fatherMethod'); // 审批 调用父组件的fatherMethod方法
},
validate() { // 父组件会调用此方法 -> 去判断表单是否有效
return new Promise((resolve) => {
this.$refs.form.validate(resolve)
})
},
// 审批重置
reset() {
this.$refs.form.resetFields();
}
}
};
</script>
<style lang="scss" scoped>
</style>