记一次开发过程中,iview遇到的一些坑以及解决办法

写在开头:本次项目采用的是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

记一次开发过程中,iview遇到的一些坑以及解决办法的相关文章

3D商城服务器开发过程中遇到的问题,原因以及解决方法。。。

问题:???? 前端场景多出来一个或者几个"死人"(这个问题在中央服务器和好友服务器中可能同样存在,只是场景服务器的表现比较明显) 玩家进入场景的包流向如下:玩家客户端-->连接服务器-->中央服务器-->连接服务器--场景服务器 玩家离开场景的包流向如下:玩家客户端-->连接服务器-->场景服务器 原因:???? 1.客户端向服务器发送了两次进入场景的包 2.玩家刚发出进入场景的包之后立即断开与连接服务器的连接,此时进入场景服务器的包还停留在中央服务器,

c++中两个头文件定义同名类的解决办法

今天考虑了一个问题,如果两个头文件比如time.h times.h里面都定义了一个time的类,要怎么解决?vs编译器只对cpp文件进行编译,在编译阶段,这两个头文件的实现文件都不会出错,如果不在主函数中用到time这个类,程序也不会有问题.但是如果用到,那就是disaster!!!,如果你不得不在两个头文件中定义同名类,下面是我自己思考出来的最简单的解决方式--->>用不同的作用域包含 #ifndef TIME_H #define TIME_H namespace time1 { class

http中 get方法 传送中文参数乱码解决办法

http传送参数有两种方法:get 和post  当时使用get方法传递中文参数是会有乱码现象 解决办法: 1.在jsp压面url后面的参数使用 encodeURI:"&zxbghy="+ encodeURI(zxbghy) 2.在后台java获取参数时使用字节数组:temphgdmhy = new String(hgdmhy.getBytes("ISO-8859-1"), "UTF-8");  案例,用get方法传递两个中文参数:zxb

java.sql.SQLException: 索引中丢失 IN 或 OUT 参数:: 1解决办法

java.sql.SQLException: 索引中丢失  IN 或 OUT 参数:: 1 at oracle.jdbc.driver.DatabaseError.throwSqlException(DatabaseError.java:125) at oracle.jdbc.driver.DatabaseError.throwSqlException(DatabaseError.java:162) at oracle.jdbc.driver.OraclePreparedStatement.pr

实战中总结出来的CSS常见问题及解决办法

一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次. 对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大. 三.一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来. 临时解

未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的解决办法

错误消息: 未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的解决办法 解决办法: 1, 若要解决该问题,请在 Visual Studio 2010 命令提示符下运行下面的命令行: aspnet_regiis.exe -i -enable 如果出现以下错误的时候我们就用方法2.. PM> aspnet_regiis.exe -i -enable无法将“aspn

通过assets像安卓程序目录中导入数据库文件出现错误的解决办法

错误提示如下,下面的错误信息 08-13 07:36:31.396: W/System.err(9814): java.io.IOException 08-13 07:36:31.416: W/System.err(9814):  at android.content.res.AssetManager.readAsset(Native Method) 08-13 07:36:31.416: W/System.err(9814):  at android.content.res.AssetMana

linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法

linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法 http://blog.csdn.net/w616589292/article/details/38274475 dos2unix命令找不到怎么办 https://zhidao.baidu.com/question/1860968406611919387.html linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法 http://blog.csdn.net/w616589292/article/details

[转]iOS Safari 中click点击事件失效的解决办法

iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成