1、如何在前端vue中隐藏某一个元素(el-form-item怎样隐藏)

给每项表单项添加一个自己的id名,并用v-model绑定相对应的数据,利用v-if根据上一个表单项的数据值来进行显示或隐藏

     <el-form-item id="ShowOrHide" v-mode="showEl" v-if="showEl==true" label="编号" type="hidden" prop="user_id">
<el-input v-model="ruleForm.user_id"></el-input>
</el-form-item> <el-form-item label="姓名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
return {
//是否展示id
showEl:false
}

2、效果

3、设置form表单为只能读、不能修改

在input标签中使用 readonly='true'

      <el-form-item label="姓名" prop="name">
<el-input v-model="ruleForm.name" readonly='true'></el-input>
</el-form-item>

怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读的更多相关文章

  1. Android中Listview点击item不变颜色以及设置listselector 无效

    Android中Listview点击item不变颜色以及设置listselector 无效 这是同一个问题,Listview中点击item是会变颜色的,因为listview设置了默认的listsele ...

  2. 转:el表达式获取map对象的内容 & js中使用el表达式 & js 中使用jstl 实现 session.removeattribute

    原文链接: ①EL表达式取Map,List值的总结 ②在jsp中使用el表达式通过键获得后台的一个map<Long,String>的值 ③在javascript中使用el表达式(有图有真相 ...

  3. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

  4. openerp学习笔记 视图(tree\form)中隐藏按钮( 创建、编辑、删除 ),tree视图中启用编辑

    视图(tree\form)中隐藏按钮( 创建.编辑.删除 )create="false" edit="false" delete="false&quo ...

  5. 在Form Load中设置showInTaskBar =false 或 隐藏窗口 this.Hide()时会导致注册的全局快捷键无效

    在Form Load中设置showInTaskBar =false   或 隐藏窗口 this.Hide() 会导致注册的全局快捷键无效.  反正是其中一个,有点记不清了. 在Form Shown中s ...

  6. 挖掘隐藏在源码中的Vue技巧!

    前言 最近关于Vue的技巧文章大热,我自己也写过一篇(vue开发中的"骚操作"),但这篇文章的技巧是能在Vue的文档中找到蛛丝马迹的,而有些文章说的技巧在Vue文档中根本找不到踪迹 ...

  7. 同时使用 Ant Design of React 中 Mention 和 Form

    使用场景,在一个列表中,点击每一行会弹出一个表单,通过修改表单数据并提交来修改这一行的数据,其中某个数据的填写需要通过Mention实现动态提示及自动补全的功能. 具体效果为: 遇到的问题: 1.希望 ...

  8. jsp中的EL和JSTL的关系

    对于JSTL和EL之间的关系,这个问题对于初学JSP的朋友来说,估计是个问题,下面来详细介绍一下JSTL和EL表达式他们之间的关系,以及JSTL和EL一些相关概念! EL相关概念 JSTL一般要配合E ...

  9. Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

随机推荐

  1. 编码GBK的不可映射字符,最新版sublime

    最近开始学java了,跟着老师写一个hello world,刚执行javac就报错:编码GBK的不可映射字符 然后去网上找了一堆,总结来说的就是编码不对,最新版的sublime只要设置utf-8保存即 ...

  2. 如何有效管理产品生命周期(How to Effectively Manage a Product Lifecycle)

    本文翻译自文章:How to Effectively Manage a Product Lifecycle 文章原文链接:https://medium.com/design-bootcamp/how- ...

  3. Nginx 代理Vue项目出现Invalid Host header

    说明 使用 Nginx 的 upstream 对 Vue 项目做负载均衡时,代理的地址无法访问目标地址,且页面报错: Invalid Host header(无效主机头) 分析 检查 Nginx 的 ...

  4. 搭建 Webpack 项目步骤

    前言 Node.js 就像是 Java 的虚拟机 + JDK,可以让 js 脱离浏览器沙盒,且提供模块机制.I/O 操作.数据库操作.网络操作等.Node.js 又提供了大量的库,NPM(类似于 Ma ...

  5. 2022年NISP考试时间|NISP一级考试时间|NISP|网安伴|NISP管理中心

    NISP一级~~国家信息安全水平考试一级证书 NISP一级证书是由中国信息安全测评中心颁发的国家级认证证书.面向全社会各行各业通用的信息安全意识普及和信息安全保护知识培训,是在任何单位和工作中都应具备 ...

  6. [CF1386C] Joker (IOI 赛制,分治,整体二分+可回退并查集)

    题面 给一个 N N N 点 M M M 边的简单无向图,询问 Q Q Q 次,每次问你把编号在 [ l i , r i ] [l_i,r_i] [li​,ri​] 之间的边删掉后,该图是否存在奇数环 ...

  7. 【java】学习路线13-多态继承

    /*多态创建一个父类的对象,用子类去初始化如果要使用子类的方法,则需要把对象强制转换为子类的(xx)xxx*/public class Learn01{    public static void m ...

  8. 从0到1写一款自动为Markdown标题添加序号的Jetbrains插件

    1. markdown-index 最近做了一个Jetbrains的插件,叫markdown-index,它的作用是为Markdown文档的标题自动添加序号,效果如下: 目前已经可以在Jetbrain ...

  9. 小技巧:webpack中@的配置和用法

    好家伙, 当我们要各种两个文件去引用别的文件时,一般这么写 import msg from '../../msg.js' 那么如果文件藏得很深,'../'会变得很多,不美观,也不直观 所以我们又又又可 ...

  10. Webdriver安装记

    和之前的博文对照,这是一篇不一样的博文 因为终于开始实际应用啦! 首先,要安装Python Python在哪找--官网有链接的:Python Release Python 3.6.3 | Python ...