element-ui 表单 v-if 不能验证问题
element-ui 表单v-if 很多人会遇到无法验证的问题,网上很多是在el-form-item标签前加一个div然后把v-if拿到div上去像这样
<div v-if="addchannel.region=='postgresql'||addchannel.region=='mongodb'||addchannel.region=='mysql'||addchannel.region=='influxdb'"
class="notlastchildren notline">
<el-form-item
:label="addchannel.region+'密码'"
label-width="200px"
prop="postgresqlpassword"
:rules='[
{required:true,message:"密码不能为空",trigger: "blur"}
]'
>
<el-input
:type="pwdType"
placeholder="密码"
v-model="addchannel.postgresqlpassword"
class="notauto readonly"
readonly
>
<template slot="append">
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="isopen" />
</span>
</template>
</el-input>
</el-form-item>
</div>
这样也有可能不行,其实再套一层div就可以了
<div v-if="addchannel.region=='postgresql'||addchannel.region=='mongodb'||addchannel.region=='mysql'||addchannel.region=='influxdb'"
class="notlastchildren notline">
<div>
<el-form-item
:label="addchannel.region+'密码'" label-width="200px"
prop="postgresqlpassword"
:rules='[
{required:true,message:"密码不能为空",trigger: "blur"}
]'
>
<el-input
:type="pwdType"
placeholder="密码"
v-model="addchannel.postgresqlpassword"
class="notauto readonly"
readonly
>
<template slot="append">
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="isopen" />
</span>
</template>
</el-input>
</el-form-item>
</div>
</div>
element-ui 表单 v-if 不能验证问题的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- vue踩坑:vue+ element ui 表单验证有值但验证失败。
一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...
- (vue.js)element ui 表单重置
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
- 自制“低奢内”CSS3注册表单,包含JS验证哦。请别嫌弃,好吗?。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
- Element Form表单实践(上)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- Element Form表单实践(下)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- EasyUI中在表单提交之前进行验证
使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $("#form1").form('validate')方法即可,E ...
随机推荐
- 不使用 MQ 如何实现 pub/sub 场景?
hello,大家好,我是小黑,又和大家见面啦~~ 在配置中心中,有一个经典的 pub/sub 场景:某个配置项发生变更之后,需要实时的同步到各个服务端节点,同时推送给客户端集群. 在之前实现的简易版配 ...
- RocketMq(三):server端处理框架及消费数据查找实现
rocketmq作为一个高性能的消息中间件,咱们光停留在使用层面,总感觉缺点什么.虽然rocketmq的官方设计文档讲得还是比较详细的,但纸上得来终觉浅!今天我们就来亲自挖一挖rocketmq的实现细 ...
- JDK8日期类入门
关于jdk8的时间类的用法,网上有很多教程教你如何用,比如: System.out.println(LocalDateTime.now()); 可以获取当前的时间, 2020-12-06T18:02: ...
- 第11.18节 Python 中re模块的匹配对象
匹配对象是Python中re模块正则表达式匹配处理的返回结果,用于存放匹配的情况.老猿认为匹配对象更多的应该是与组匹配模式的功能对应的,只是没有使用组匹配模式的正则表达式整体作为组0. 为了说明下面的 ...
- Java数据结构(十五)—— 多路查找树
多路查找树 二叉树和B树 二叉树的问题分析 二叉树操作效率高 二叉树需要加载到内存,若二叉树的节点多存在如下问题: 问题1:构建二叉树时,需多次进行I/O操作,对与速度有影响 问题2:节点海量造成二叉 ...
- ollvm在VS2017下编译
0x1,首先介绍一下编译环境配置 1.UE4.25 2.vs2017(15.9),注:2019编译总是出现错误 3.cmake3.18.5,cmake的作用是为ollvm源码编译成适合于在vs2017 ...
- Github 美化设置个人主页
起因是发现自己follow的大师傅个人主页跟普通的不太一样: 猜测应该是Github啥时候出现的新功能,查了一下,发现可以通过创建同名仓库来实现个人主页的美化设置 首先在 GitHub 上建立一个与自 ...
- jarvisoj babyphp
jarvisoj babyphp 涉及知识点: (1)GitHack处理.git源码泄露 (2)php代码注入 解析: 进入题目界面. 看到题目中的用了git那么第一反应肯定是可能存在.git源码泄露 ...
- 剑指offer二刷——数组专题——数组中出现次数超过一半的数字
题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...
- 理解js浅拷贝和深拷贝
理解深拷贝和浅拷贝之前先了解下js中的基本类型和引用类型 1.基本类型: 在js中,数据的基本类型undefined,null,string,number,boolean,在变量中赋的实际值,基本类型 ...