写在开头:本次项目采用的是vue2.0+iview3.0,最近公司没啥事,来总结一下开发过程中遇到的问题。
1、Modal关闭问题
需求背景:modal框里面是个form表单,点击确定之后,先验证form表单,验证通过则关闭modal框,验证不成功则提示用户,不关闭。
问题描述:本来刚开始想通过modal框v-model绑定的值(true或false)来进行控制,手动改之后,报错。
解决办法:
官方iview的modal组件的api里面有个loading属性,可通过控制loading的值来进行控制modal的显示。
举例说明:
注意: refuseLoading刚开始一定要设置为true。
这样的话就可以解决问题了。
衍生出来的问题:当关闭模态框之后,再次打开时,表单数据没有重置,还是上一次的数据。
解决办法:this.$refs[name].resetFields(); 重置表单数据,在关闭模态框的时候调用这个方法可解决。
2、同时验证多个表单问题
需求背景:一个页面有多个表单,提交的时候需要验证多个表单,都验证成功才能进行下一步操作
解决办法:用一个数组来存放每个表单的验证结果(true验证通过,false验证不通过),最后循环这个数组如果值都为true,说明验证通过。
举例说明:页面有3个表单,需要同时验证,主要代码如下:
<template> <div class="hello"> <Form ref="formValidate1" :model="formValidate1" :rules="ruleValidate"> <FormItem label="Name" prop="name"> <Input v-model="formValidate1.name" placeholder="Enter your name"></Input> </FormItem> </Form> <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate"> <FormItem label="Name" prop="name"> <Input v-model="formValidate2.name" placeholder="Enter your name"></Input> </FormItem> </Form> <Form ref="formValidate3" :model="formValidate3" :rules="ruleValidate"> <FormItem label="Name" prop="name"> <Input v-model="formValidate3.name" placeholder="Enter your name"></Input> </FormItem> </Form> <Button @click="submit">提交</Button> </div> </template> <script> export default { name: ‘HelloWorld‘, data() { return { formValidate1: { name: ‘‘ }, formValidate2: { name: ‘‘ }, formValidate3: { name: ‘‘ }, ruleValidate: { name: [ { required: true, message: ‘The name cannot be empty‘, trigger: ‘blur‘ } ] }, arr: [] } }, methods: { check(name){ // 验证表单是否通过 this.$refs[name].validate((valid) => { if(valid) { this.arr.push(true); // arr 这个数组是用来存放单个表单的验证状态 } else { this.arr.push(false); } }) }, submit(){ // 提交 this.arr = []; // 重置数组 // 同时验证多个表单 this.check(‘formValidate1‘); this.check(‘formValidate2‘); this.check(‘formValidate3‘); var flag = null; for(var i = 0; i < this.arr.length; i++) { if(this.arr[i]) { // 单个表单验证通过,继续验证下个表单 flag = true; continue; } else { // 单个表单验证不通过,结束 flag = false; break; } } if(flag){ // 验证表单成功 alert("验证成功"); }else{ alert("验证失败") } } } } </script> <style scoped></style>
原文地址:https://www.cnblogs.com/yanxulan/p/10407029.html
时间: 2024-10-29 19:08:28