优化:确定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. [常用工具] 基于psutil和GPUtil获取系统状态信息

    本文主要介绍在Python3中利用psutil库获取系统状态,利用GPUtil获取gpu状态. psutil (process and system utilities)(进程和系统实用程序)是一个跨 ...

  2. [seaborn] seaborn学习笔记12-绘图实例(4) Drawing example(4)

    文章目录 12 绘图实例(4) Drawing example(4) 1. Scatterplot with varying point sizes and hues(relplot) 2. Scat ...

  3. [seaborn] seaborn学习笔记1-箱形图Boxplot

    文章目录 1 箱形图Boxplot 1. 基础箱形图绘制 Basic boxplot and input format 2. 自定义外观 Custom boxplot appearance 3. 箱型 ...

  4. 实现简单的csv文件上传和bootstrap表格的下载

    一.写一个简单的页面并发送文件 引入bootstrap.js,jQuery.js等,具体的网页就不细写了,很简单. 加入input框,button控件,进度条.如下: <li class=&qu ...

  5. Matplotlib学习笔记1 - 上手制作一些图表吧!

    Matplotlib学习笔记1 - 上手制作一些图表吧! Matplotlib是一个面向Python的,专注于数据可视化的模块. 快速上手 这是使用频率最高的几个模块,在接下来的程序中,都需要把它们作 ...

  6. Z-Blog后台getshell

    Z-Blog后台getshell 本人所有文章均为技术分享,均用于防御为目的的记录,所有操作均在实验环境下进行,请勿用于其他用途,否则后果自负. 0x00 环境部署 文件下载地址 打开phpstudy ...

  7. 快速入门pandas进行数据挖掘数据分析[多维度排序、数据筛选、分组计算、透视表](一)

    1. 快速入门python,python基本语法 Python使用缩进(tab或者空格)来组织代码,而不是像其 他语言比如R.C++.Java和Perl那样用大括号.考虑使用for循 环来实现排序算法 ...

  8. Markdown箭头总汇

    Markdown箭头的汇总 普通箭头 \[\uparrow \] $$\uparrow$$ \[\Uparrow \] $$\Uparrow$$ \[\downarrow \] $$\downarro ...

  9. JAVA虚拟机08--垃圾回收--HotSpot的算法实现细节

    1 stop the world 2 减少stop the world的时间-OopMap 3 OopMap数据结构的维护-安全点-安全区域 3.1安全点 3.2在垃圾回收时如何让所有线程到达最近的安 ...

  10. 使用 shell 脚本拼接 srt 字幕文件 (srtcat)

    背景 前段时间迷上了做 B 站视频,主要是摩托车方面的知识分享.做的也比较粗糙,就是几张图片配上语音和字幕进行解说.尝试过自己解说,发现录制视频对节奏的要求还是比较高的,这里面水太深把握不住.好在以 ...