记一次开发过程中,iview遇到的一些坑以及解决办法(代码片段)

yanxulan yanxulan     2023-03-09     616

关键词:

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

 

       

 

记一次wordpress安装过程中遇到的问题及解决办法

Q:无法建立目录wp-content/uploads/2017/03。有没有上级目录的写权限?A:执行chmod777wp-content/提升目录权限Q:安装主题或安装插件的时候,用到FTP提示用户名密码不正确,使用XFTP也连接不上?A:这是由于根目录的权限过高(777),应该把... 查看详情

记一次uboot升级过程的两个坑(代码片段)

背景之前做过一次uboot的升级,当时留下了一些记录,本文摘录其中比较有意思的两个问题。启动失败问题问题简述uboot代码中用到了一个库,考虑到库本身跟uboot版本没什么关系,就直接把旧的库文件拷贝过来使用。结果编译链... 查看详情

reactnative在开发过程中遇到的一些问题(俗称:坑)

4900服务器地址错误运行时产生以下错误:Couldnotconnecttodevelopmentserver.1、URL地址设置问题:[objc] viewplain copyCould not connect to development server.    Ensure  查看详情

记一次django响应超慢的解决过程

  在本地windows机器开发的Django项目运行正常,放到服务器上后响应超慢,花了一整个工作日没找到原因(非常绝望),又花了一整个周末才找到原因和临时解决办法,如果你的项目超慢可以参考一下解决思路。 排查过程... 查看详情

记一次完整的pc端整站开发

我所做的项目是一个线上的旅游平台,当然不是大家耳熟能详的那些旅游平台了,项目刚开始也没有必要去评价它的好坏,在这里我就不多说了~这是线上地址有兴趣的同学可以去看看(www.bookingctrip.com)。整个项目历时半年的时... 查看详情

记一次gorm批量插入遇到的问题以及解决方案(代码片段)

文章目录问题现象解决方案问题现象最初,我们用的是老版本的Gorm,但是因为老版本不支持批量插入的功能,所以我们将Gorm做了升级,升级到1.21.9版本。https://github.com/go-gorm/gorm/releases/tag/v1.21.9升级之后,Gorm... 查看详情

记一次rr和硬件断点解决内存踩踏问题(代码片段)

借助rr来定位查询语句结果不一致的问题。在日常的调试过程中,我们总会遇到一些有趣的bug,在本文我就遇到了一个有意思的查询结果不一致问题。故事的开始我们在测试NebulaGraph的MATCH语句的时候发现一个很神奇的事情:(root@... 查看详情

记一次git排故过程

1)今天在gitclone过程中首先遇到如下问题:RPCfailed;curl56SSLread:error:00000000:lib(0):func(0):reason(0),errno10054核心内容就是errno10054,参考这个链接给出的解决方法。使用如下命令解决:gitconfig--addcore.compression-1结 查看详情

xamarin开发中遇到的一些坑

...没有运行,这个程序相当于.net运行时,没有运行的话用C#开发的程序自然无法运行。解决办法:打开安卓选项取 查看详情

zookeeper安装以及遇到的一些坑(代码片段)

...操作部分是摘自其他博客,里边的问题分析是自己在实践过程中遇到然后特别记录的!-----------------------------开始:一、Zookeeper原理简介ZooKeeper是一个开放源码的分布式应用程序协调服务,它包含一个简单的原语集 查看详情

golang记一次datarace排查过程(代码片段)

golang记一次datarace排查过程背景datarace现场解决思路经验总结datarace在写并发代码时候经常遇到,相关基础概念的介绍可以参考之前一篇文章:golangdatarace竞态条件https://louyuting.blog.csdn.net/article/details/103606831这篇文章主要是... 查看详情

记一次数据处理的过程

    由于所在公司是主要做短信行业,平时和手机号码打交道较多,各种奇葩需求也比较多,近期接到一个一个总监的奇葩需求,就是将两个文件中相同的手机号码弄处理,由于编程水平以及excel玩的有限,所以只... 查看详情

记一次bindissue解决过程(代码片段)

在IBM的大机测试环境下,编辑好的程序已经通过编译,并且拷贝到了RND的目录中。但是用之前能够正常BIND其它DB2程序的JCL去做RND环境下的BIND的时候,总是BIND错误。通过查看JCL的错误信息,定位到如下的SQL错误......SQLCODE=-206SQLSTA... 查看详情

记一次使用greendao的小“坑”(代码片段)

很多Android开发者选择Greendao作为数据库使用工具,关于greendao的教程网络上也是一大堆,这里就不再介绍,主要是记录在项目中使用greendao出现的一个小问题,greendao的地址如下:greendao事先说一下,我项目... 查看详情

记一次使用greendao的小“坑”(代码片段)

很多Android开发者选择Greendao作为数据库使用工具,关于greendao的教程网络上也是一大堆,这里就不再介绍,主要是记录在项目中使用greendao出现的一个小问题,greendao的地址如下:greendao事先说一下,我项目... 查看详情

记一次关于nvrom中遇到的“couldnotpreparebootvariable:nospaceleftondevice”问题的解决历程(代码片段)

注:关于我电脑遇到的问题,不是一两句话能够说清楚的。为了能够比较完整的呈现问题的某些细节,在这篇博客中我会添加许多问题发生的背景,如果当中有观点与您的三观不合,请立即停止阅读,及时止损。第一次进入计算... 查看详情

前端开发过程中遇到过啥困难?

面试前端开发工程师,对方问:“开发中遇到过什么困难,如何解决的?”这个问题应该怎么回答?希望大神给个范文。不要给什么问题分析、思路之类的,就是要一个可以背下来的范文。开发中主要会用到Vue、vue-cli、webpack、n... 查看详情

记一次模拟点击,winform小软件开发过程

前言    年初四月份的时候,有朋友找到我,说想开发一个模拟点击的软件。最终软件做完后,发现效果不理想。唯一开发的我是认为最好是放弃了,做运营的他,坚持说这个没问题,说是改变合作方式。最终也是... 查看详情