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 不能验证问题的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  3. vue踩坑:vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  4. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  5. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  6. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

  7. 自制“低奢内”CSS3注册表单,包含JS验证哦。请别嫌弃,好吗?。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  8. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  9. Element Form表单实践(下)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  10. EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return  $("#form1").form('validate')方法即可,E ...

随机推荐

  1. [题解] 洛谷 P3393 逃离僵尸岛

    题目TP门 很明显是一个最短路,但是如何建图才是关键. 对于每一个不可遍历到的点,可以向外扩散,找到危险城市. 若是对于每一个这样的城市进行搜索,时间复杂度就为\(O(n^2)\),显然过不了.不妨把 ...

  2. 基于 RabbitMQ-EasyNetQ 实现.NET与Go的消息调度交互

    基于 RabbitMQ 实现跨语言的消息调度 微服务的盛行,使我们由原来的单机"巨服务"的项目拆分成了不同的业务相对独立的模块,以及与业务不相关的中间件模块.这样我们免不了在公司不 ...

  3. kali putty远程连接允许以root身份登录

    原文链接:https://blog.csdn.net/long_long_chuang/article/details/70227874 kali linux通过ssh+putty来实现远程登录(亲测 ...

  4. 20201101_Python的虚拟环境问题

    虚拟环境使用总结: 1. 安装创建虚拟环境要使用的工具virtualenv  pip install virtualenv -i https://pypi.douban.com/simple/ #使用 ...

  5. maven依赖问题的出现原因与解决方式

    摘要 maven依赖问题作为开发者应该是经常遇到的问题,在个人单独开发单独维护的项目里,可能体现不那么明显,一是自己对导入的jar大部分都很明确,二是出现问题第一解决发现也很快,问题就没那么严重,而在 ...

  6. Java读书计划和分享

    写在前面 为什么要写这些呢? 接触java已经有三年多了,感触颇多,比如从0到60,只要勤实践.勤思考,很快就可以入门,从60分到满分极致,则单单不是凭借工作年限或者什么就可以.曾经也有过一段迷茫时期 ...

  7. nodejs事件和事件循环简介

    目录 简介 事件 事件循环 事件循环的阻塞 事件循环举例 栈和消息队列 作业队列和promise process.nextTick() setImmediate() setInterval() 简介 ...

  8. moviepy音视频剪辑:TextClip.list(font)和search搜索字体报错UnicodeDecodeError:utf-8 codec cannott decode byte 问题

    ☞ ░ 前往老猿Python博文目录 ░ 在moviepy2.0.0.Dev版本中,执行如下语句: from moviepy.editor import * TextClip.search('gb', ...

  9. 第9.1节 Python的文件打开函数open简介

    一.语法简介 函数基本使用语法:open(文件名,文件打开模式='rt') 其中: 1.文件名为可带路径的文件名,注意windows下路径的反斜杠会被作为转义符处理,因此可以采用前面再加反斜杠或使用原 ...

  10. C++中对一个布尔类型的变量按位取反结果不变

    C++中对一个bool类型的变量按位取反是无效的.例如: bool a = true; bool b = ~a; // b的值还是true