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. Java面试题(二)--MySQL

    1 存储引擎 1.简单描述一个Mysql的内部结构? MySQL的基本架构示意图: 大体来说,MySQL可以分为server层和存储引擎层两部分. ① server层包括连接器.查询缓存.分析器.优化 ...

  2. Linux系列之重定向操作

    前言 I/O重定向允许我们将命令的输入和输出重定向到文件中,以及将多个命令连接到一起成为管道.本文就来介绍有关重定向的知识. 标准输入.输出.错误 输出包括两种类型: 程序的结果.被称为标准输出或者s ...

  3. 【转载】一封面向社会,关于对近日来 CCF 不当行为之抗议的公开信

    原文链接:https://101001011.github.io/2022/06/11/zhi-ccf-de-yi-feng-gong-kai-xin/ 原文作者:CCA(CCA's Blog) 前天 ...

  4. Hi3516开发笔记(十):Qt从VPSS中获取通道图像数据存储为jpg文件

    前言   上一篇已经将himpp套入qt的基础上进行开发.那么qt中拿到frame则是很关键的交互,这是qt与海思可能编解码交叉开发的关键步骤.   受限制   因为直接配置sample的vi比较麻烦 ...

  5. BZOJ2286/Luogu2495 [Sdoi2011]消耗战 (虚树)

    // never forget open "Head.cpp", boy, never ! #include <iostream> #include <cstdi ...

  6. SpringMvc 如何同时支持 Jsp 和 Json 接口?

    后端同学基本都会见过这种场景:在同一个工程中,有些页面使用jsp模版渲染,同时还有其他接口提供Json格式的返回值.为了同时支持这两种场景,我们一般是如何处理的呢? 其实非常简单: 1.在项目中为 S ...

  7. GoogleTest环境配置以及应用

    1 GoogleTest源码编译: GoogleTest代码仓库URL: https://github.com/google/googletest.git 下载源代码: git clone --bra ...

  8. 使用Python批量爬取美女图片

    运行截图 实列代码: from bs4 import BeautifulSoup import requests,re,os headers = { 'User-Agent': 'Mozilla/5. ...

  9. 【mido】python的midi处理库

    安装mido库:pip install mido pipy地址:https://pypi.org/project/mido/ mido官方文档:https://mido.readthedocs.io/ ...

  10. Prometheus教程

    Prometheus介绍 主要特征 使用时间序列数据(tsdb)的多维度数据模型 灵活的查询语言(PromQL) 不依赖分布式存储,单个节点是自主的 通过http请求拉取(pull)时间序列数据(ts ...