您的位置:首页 > 房产 > 建筑 > el-form多表单校验

el-form多表单校验

2025/8/1 0:46:38 来源:https://blog.csdn.net/dy1717/article/details/141019062  浏览:    关键词:el-form多表单校验

思路:使用Promise.all以及elementui自带的表单校验去判断

<el-form ref="form" :model="formData">....
</el-form><el-form ref="formTwo"  :model="formDataTwo">....
</el-form><el-form ref="formThird"  :model="formDataThird">....
</el-form>
...<span slot="footer" class="dialog-footer"><el-button @click="handleClickCancel">{{ '取消' }}</el-button><el-button type="primary" @click="validFormHandle">{{ '确定' }}</el-button></span>

需求:所有表单通过校验后才可以请求接口

    /*** @description: 确定的点击事件* @return {*}*/validFormHandle() {Promise.all(['formData', 'formDataTwo','formDataThird'].map(item => this.validForm(item))).then(() => {this.handleClickOk()}).catch(error => {this.$message({showClose: true,message: '请先检查表单是否都已填写',type: 'warning'})console.log('error', error)})},handleClickOk() {const params = { ...this.formData, ...this.formDataTwo,...this.formDataThird }
//请求接口处理
xxx(params).then(res =>{this.$message.success(res.msg)
)},// 校验表单validForm(formRef) {return new Promise((resovle, reject) => {this.$refs[formRef].validate(valid => {if (valid) {resovle()} else {reject()}})})},

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com