优化:确定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. DVWA靶场实战(四)——File Inclusion

    DVWA靶场实战(四) 四.File Inclusion: 1.漏洞原理: 随着网站的业务的需求,程序开发人员一般希望代码更加灵活,所以将被包含的文件设置为变量,用来进行动态调用,但是正是这种灵活性通 ...

  2. [Leetcode]旋转链表

    题目 代码 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * Li ...

  3. [WPF]颜色主题功能

    效果 点击选择皮肤颜色 代码 public enum Themes { Blue, Gray, Orange } /// <summary> /// 主题颜色管理类 /// </su ...

  4. test20230111考试总结 -2023寒图论专题

    前言 赛时得分情况: A B C D E F G H I \(\texttt{Total}\) \(\texttt{Rank}\) \(100\) \(100\) \(10\) \(58\) \(54 ...

  5. LCD副屏-CPU,内存,时显,日期显示

    文章结构: 项目概述 成品预览 项目框架 硬件资料,代码 项目槽点 -项目概述- 以前的旧模块搁置很久没用,最近看到圈子很多倒腾电脑副屏的,咱虽然没钱,但是闲啊,刚好手头有这些东西,开干. 目的: 显 ...

  6. BC3-牛牛学说话之-整数

    题目描述 牛牛刚刚出生,嗷嗷待哺,一开始他只能学说简单的数字,你跟他说一个整数,他立刻就能学会.输入一个整数,输出这个整数. 输入描述 输入一个整数,范围在32位有符号整数范围内 输出描述 输出这个整 ...

  7. AI换脸实战教学(FaceSwap的使用)---------第二步Tools:处理输入数据集。

    续上篇:https://www.cnblogs.com/techs-wenzhe/p/12936809.html 第一步中已经提取出了源视频的人脸照片以及对应人脸遮罩(landmark以及其他自选遮罩 ...

  8. Linux密钥认证

    网站集群批量管理-秘钥认证 一.概述 管理更加轻松:两个节点,通过秘钥形式进行访问,不需要输入密码,单向 应用场景: 一些服务在使用前要求做秘钥认证 手动写批量管理脚本 名字:秘钥认证,免密码登录,双 ...

  9. FAQ docker进程启动失败处理案例分享

    docker进程启动失败处理 背景 有同学反馈在启动docker的时候遇到了如下问题:docker启动报错 [root@wuxianfeng ~]# systemctl start docker Jo ...

  10. Python标准库pathlib及实例操作

    Python标准库pathlib及实例操作 https://docs.python.org/zh-cn/3.9/library/pathlib.html 官网 讲的比较好的文章 https://zhu ...