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 ...
随机推荐
- Unity使用transform.Translate()移动子物体时遇到的小问题
Unity使用transform.Translate()移动子物体时遇到的小问题 情况大概是这样:父物体A下有子物体B,希望使B在本地坐标系下移动1单位. B物体挂脚本代码如下: transform. ...
- 【进阶之路】定时任务调用平台xxl-job
大家好,我是练习java两年半时间的南橘,从一名连java有几种数据结构都不懂超级小白,到现在懂了一点点的进阶小白,学到了不少的东西.知识越分享越值钱,我这段时间总结(包括从别的大佬那边学习,引用)了 ...
- 庐山真面目之六微服务架构Consul集群、Ocelot网关集群和Nginx版本实现
庐山真面目之六微服务架构Consul集群.Ocelot网关集群和Nginx版本实现 一.简介 在上一篇文章<庐山真面目之五微服务架构Consul集群.Ocelot网关和Nginx版本实 ...
- C++编程指南续
三. 命名规则 比较著名的命名规则当推Microsoft公司的"匈牙利"法,该命名规则的主要思想是"在变量和函数名中加入前缀以增进人们对程序的理解".例如所有的 ...
- PyQt学习随笔:应用中通过installEventFilter安装重写的eventFilter捕获应用事件的方法
eventFilter函数是直接从QObject继承的定义的事件刷选虚拟函数,如果一个对象A使用installEventFilter函数将另一个对象B安装了B的实例方法eventFilter,则这个对 ...
- Python自动发射弹幕
Python自动发射弹幕,弹幕护体 - 环境: Python3+Windows- 开发工具: PyCharm 学习效果:1. 学会使用Python刷弹幕2. 配置INI文件信息3. 掌握网络请求知识4 ...
- 你必须知道的MySQL知识点
什么是索引 索引是帮助MySQL高效获取数据的排好序的数据结构 索引数据结构(掌握) 数据结构可视化 前置知识:树的高度越低查询效率越高 二叉树:不能自平衡,极端情况出现倾斜,查询效率和链表类似 红黑 ...
- .Net Core ABP应用如何在阿里云Linux Docker中开启Https
.Net Core应用开启Https本身就有很多种方式:1.代码配置2.环境变量3.反向代理 这里主要记录下阿里云的ECS,加阿里云免费的SSL证书,通过程序代码,如何进行配置. 首先从阿里云下载证书 ...
- 题解-洛谷P4229 某位歌姬的故事
题面 洛谷P4229 某位歌姬的故事 \(T\) 组测试数据.有 \(n\) 个音节,每个音节 \(h_i\in[1,A]\),还有 \(m\) 个限制 \((l_i,r_i,g_i)\) 表示 \( ...
- 【NOI2019】弹跳(KDT优化建图)
Description 平面上有 \(n\) 个点,分布在 \(w \times h\) 的网格上.有 \(m\) 个弹跳装置,由一个六元组描述.第 \(i\) 个装置有参数:\((p_i, t_i, ...