问题:一个弹框里包含一个父级表单el-form,这个父级表单中的el-form-item里包含了一个子组件,这个组件里写成form的表单的结构。需要在弹框的提交表单事件中触发子组件和这个父级表单的校验。
思路:在子组件里面,写一个校验事件。在父级表单提交表单事件中加一个判断父级表单校验条件和子组件校验通过条件。
父级表单提交事件:
submit(){
this.$refs['fatherForm'].validate(valid => {
const flag = this.$refs.childBox.validate()
if (valid && flag) {
//执行的操作
}
}
}
子组件childBox的校验:
// 校验成功则方法自动返回true,校验方法报错则说明校验失败,返回false
validate() {
let flag = null
this.$refs.childForm.validate((valid) => {
if (valid) {
flag = true
} else {
flag = false
}
})
return flag
},