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. ZJOI2022选做

    \(ZJOI2022\) 众数 发现并不存在\(poly(log(n))\)的做法,那么尝试\(n\sqrt n\) 套路的按照出现次数分组,分为大于\(\sqrt n\)和小于\(\sqrt n\) ...

  2. ansible一键安装GreatSQL并构建MGR集群

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 利用ansible一键安装GreatSQL并完成MGR部署. 本次介绍如何利用ansible一键安装GreatSQL并完成 ...

  3. wbr 文本换行规则标签

    <wbr/>标签规定在文本中的何处适合添加换行符.如果文本太长,浏览器可能会在错误的位置换行,那么可以使用<wbr/>标签来添加单词换行时机. Talk is cheap. S ...

  4. Java代码自动计算机

    答案(这里面包括main方法不要写重了),copy即可使用: public static void main(String[] args) { while (true){ System.out.pri ...

  5. 高颜值,类似Fliqlo的翻页时钟-BdTab新标签页插件组件

    起因: 很多用户在使用BdTab插件时,反馈说希望添加一个时钟的功能, 而BdTab又是组件模块化的插件,于是在空余时间就用html+js+css写了一款高颜值的分页时钟 源码如下: 需要其他网页组件 ...

  6. 从零教你使用MindStudio进行Pytorch离线推理全流程

    摘要:MindStudio的是一套基于华为自研昇腾AI处理器开发的AI全栈开发工具平台,该IDE上功能很多,涵盖面广,可以进行包括网络模型训练.移植.应用开发.推理运行及自定义算子开发等多种任务. 本 ...

  7. python一行代码格式化日期

    print("{}/{}/{} {}:{}.{}".format(*time.localtime()))

  8. clipboard实现文本复制的方法

    1.下载地址: https://github.com/mo3408/clipboard 2.使用方法: 先引入js: <script src="dist/clipboard.min.j ...

  9. 在Apache Cassandra数据库软件中报告高严重性RCE安全漏洞

    研究人员披露了ApacheCassandra一个现已修补的高严重性安全漏洞的细节,如果这个漏洞得不到解决,可能会被滥用来获取受影响安装的远程代码执行(RCE). DevOps公司JFrog的安全研究员 ...

  10. C++基础入门:C++初始

    1. C++环境:Clion搭建 下载链接:clion官方网址 1.1 点击下载 1.2 下载对应版本 1.3 安装步骤: 1.3.1 下载完毕后,打开exe文件,进入安装界面,点击[Next > ...