vue + elementUI 多个表单同时校验
在项目开发中会遇到多个表单块同时做校验的情况,这时候会因为代码分散或者呈现在不同组件而无法一次性校验完成。
父组件调用
let valid = await this.$refs.formData.handleSubmitForm()
子组件
//在data中定义 refArr: ['form1','form2'] //提交或者保存 handleSubmitForm() { const v = new Promise((resolve, reject) => { Promise.all(this.refArr.map(this.checkForm)).then(res => { const validateResult = res.every(item => !!item) if (validateResult) { resolve(validateResult) console.log(res, '表单都验证成功了') } else { reject(validateResult) console.log(res, '表单未校验通过') } }) }) return v }, checkForm(formName) { let t = this return new Promise(resolve => { t.$refs[formName][0].validate(res => { resolve(res) }) }) }, //清除表单内容 handleresetFields() { this.refArr.forEach(el => { this.resetForm(el) }) }, resetForm(formName) { this.$refs[formName][0].resetFields() }