this.formValidate(this.save()); // 先在点击事件中写出需要的回调
// Object.keys(this.$refs):[
// "baseForm",
// "operationForm",
// "kytlForm",
// "qtkyForm"
// ]
// this.$refs[refName]:(3) [VueComponent, VueComponent, VueComponent]
// 多表单校验
formValidate(callback) {
const forms = [];
// 外层循环拿到ref的下标
Object.keys(this.$refs).forEach(refName => {
//内层循环遍历对应下标的循环表单,模版中在这个里循环了多个表单,故找到对应的form↓↓↓
this.$refs[refName].forEach(form => {
然后拿到效验返回值组成数组
forms.push(form.validate());
});
});
console.log("forms", forms);
// 这里是所有的效验函数 放进promiseall里,
// [true, true, true, true, true, true, true, true, true, true]
Promise.all(forms).then((valids) => {
console.log(valids);
// [true, true, true, true, true, true, true, true, true, true]
if (valids.every((valid) => valid)) callback();
}).catch(error => {
this.$notify({
type: "error",
title: "提示",
message: "存在必填项未填写!"
});
console.error("error=>>", error);
});
},
总体思想是将多表单的验证收集起来,用promise.all一起触发,all有个特点多个异步的函数如果有一个出现错误就会catch就提示错误请填写,都通过了就是then就直接通过验证