优化:确定secondRules的数据在secondFlag改变之前进行赋值 可以用$nextTick来执行,不用setTimeOut

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1.动态改变rules的值不起效果,所以看了别人的博客改了一下用computed监听才起效果

 <el-form ref="ruleForm" label-width="100px" :rules="currentRules"  :model="ruleForm" class = "queryForm form_input">
</el-form>

  

  computed: {
currentRules:function(){
console.log(this.secondFlag);
if(this.secondFlag){ //是否改变rules的判断参数
return this.secondRules;
}else{
return this.rules;
}
},
},

 因为我的第二个rules不是初始化的  是动态的数据,所以要先确定secondRules的数据在secondFlag改变之前进行赋值,所以我用了setTimeout处理。

vue+element form 动态改变rules校验数据的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  2. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  3. vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

  4. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

  5. vue中form 表单常用校验封装(async-validator)

    新建一个js校验文件validate.js export const regular = { // 验证自然数 naturalNumber: /^(([0-9]*[1-9][0-9]*)|(0+))$ ...

  6. 【vue】vue +element 搭建项目,mock模拟数据(纯干货)

    1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...

  7. vue+element Form键盘回车事件页面刷新解决

    问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览 ...

  8. 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

    在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...

  9. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  10. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

随机推荐

  1. [python] 基于Gradio可视化部署机器学习应用

    Gradio是一个开源的Python库,用于构建机器学习和数据科学演示应用.有了Gradio,你可以围绕你的机器学习模型或数据科学工作流程快速创建一个简单漂亮的用户界面.Gradio适用于以下情况: ...

  2. [OpenCV实战]1 基于深度学习识别人脸性别和年龄

    目录 1基于CNN的性别分类建模原理 1.1 人脸识别 1.2 性别预测 1.3 年龄预测 1.4 结果 2 代码 参考 本教程中,我们将讨论应用于面部的深层学习的有趣应用.我们将估计年龄,并从单个图 ...

  3. 使用Dapr和.NET 6.0进行微服务实战:Dapr简介

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 本文是<使用Dapr和.NET 6.0进行微服务实战>的第2篇Dapr ...

  4. SICTF_wp

    misc 签到打卡完成 附加下载完成之后可以看到是qsnctf的公众号 使用010打开附件 可以发现key,去公众号回复key即可获得flag SICTF{fb23cefd-487f-42dd-a34 ...

  5. vue+div.canvas图像标注功能实现

    main.js import Vue from 'vue' import 'vueui-widgets/dist/index.css' import VueUI from 'vueui-widgets ...

  6. DRF安装与使用

    目录 DRF安装与使用 一.web应用模式(前后端不分离&前后端分离) 二.API接口 1.API接口概念讲解 2.IPA接口测试工具postman 3.RESTful API规范 4.幂等性 ...

  7. 阿里百秀后台管理项目笔记 ---- Day02

    来吧展示: step1: 动态获取用户头像信息 引入 jquery.js 文件 <script src="/static/assets/vendors/jquery/jquery.js ...

  8. mysql 错误解决大法 Specified key was too long; max key length is 767 bytes

    高版本mysql向低版本(5.7以下)导入sql时可能会发生此问题 开启索引最大长度 SET GLOBAL INNODB_LARGE_PREFIX = ON; 将表改为动态表SET GLOBAL in ...

  9. ssh 连接 wsl2

    修改ssh相关config https://cloud.tencent.com/developer/article/1538305 其中,端口可以设置成 2222 以防万一 然后在wsl 中执行如下命 ...

  10. Eclpis-cannot open git-receive-pack

    转载:https://blog.csdn.net/qq_29954971/article/details/80191193 问题:在采用MyEclipse软件(JDK1.7)作为开发环境,利用GitH ...