VUE-004-禁止修改页面显示项,设置el-input,textarea只读方法
在实际业务需求中,有些内容当初次创建后,即不可再次进行修改变更,因而需要显示的文本内容不允许变更。此时,可通过页面限制防止用户修改。
方法:添加 readonly="true" 或者 :disabled="true" 均可实现。代码示例如下所示:
<el-form-item label="基准库信息:" :label-width="formLabelWidth">
<el-input type="textarea" readonly="true" v-model="formData.benchmarkDetail" clearable placeholder="请输入基准库信息..."></el-input>
</el-form-item>
<el-form-item label="比对库信息:" :label-width="formLabelWidth">
<el-input type="textarea" :disabled="true" v-model="formData.targetDetail" clearable placeholder="请输入比对库信息..."></el-input>
</el-form-item>
最终,页面显示效果如下所示:

从显示样式上简单来看:
1、使用属性 readonly="true" 方式,输入框或文本域无灰色底;
2、使用属性 :disabled="true" 方式,输入框或文本域有灰色底。
VUE-004-禁止修改页面显示项,设置el-input,textarea只读方法的更多相关文章
- vue v-cloak 指令 处理页面显示源码
有时候页面会先出现源码,再显示解析的内容.可以通过v-cloak解决 v-cloak 这个指令会作为元素的一个属性一直保持到vue实例编译结束,即解析后移除此指令. /* 含有v-cloak的html ...
- layui中radio的动态加载(进入修改页面时,设置radio)
动态设置 radio 的值让它处于选中状态 效果图 : 前端代码: <div class="layui-form-item"> <label class=& ...
- vue的iview列表table render函数设置DOM属性值的方法
{ title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ sr ...
- vue打包后页面显示空白但是不报错
在使用vue打包的时候页面显示空白,并且控制台不报错 设置vue-router的时候mode设置为history模式了,这种模式要有后台的配合,一般还是使用哈希模式就不会出现页面空白了.
- jsp fmt页面显示value does not support runtime expressions
最近使用Struts2+Spring3+Mybatis3做一个项目,在用户修改页面显示生日, <fmt:formatDate value="${user.birthday}" ...
- PHP页面显示中文字符出现乱码
[出现问题] php页面显示中文字符出现乱码 [解决方法] 在php页面的代码前插入一行代码即可 header("Content-Type: text/html;charset=utf-8& ...
- Chrome扩展修改页面代码执行环境的方法
Chrome的扩展程序可以通过content scripts向页面中注入js代码,所注入的js代码能够对页面中所有的DOM对象进行操作.由于Chrome在js执行环境上对页面代码和content sc ...
- 设置vue启动项目后默认显示的页面
通过配置路由,可以设置vue项目启动后默认显示的页面.路由的path设置为path:"/",启动项目后就会显示默认的组件页面. import Vue from 'vue' impo ...
- day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息
目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...
随机推荐
- java中的BigDecimal和String的相互转换,int和String的类型转换,Integer类和String相互转换
一: /*由数字字符串构造BigDecimal的方法 *设置BigDecimal的小数位数的方法 */ 注:BigDecimal在数据库中存的是number类型. import java.math.B ...
- Allegro PCB Design GXL (legacy) 将brd文件另存为低版本文件
Allegro PCB Design GXL (legacy) version 16.6-2015 参考:https://blog.csdn.net/qq_29761395/article/detai ...
- Allegro PCB Design GXL (legacy) 设置自动保存brd文件
Allegro PCB Design GXL (legacy) version 16.6-2015 菜单Setup > User Preferences... 在User Preferences ...
- 《学习之道》第八章孤军奋战or组队合作
孤军奋战与组队合作:别再苦思冥想,拖延行为需要差别对待 对拖延我得提一个小建议,你要暂时把自己与那些会干扰你的人和事隔离开.自己到一个房间里去,或者去图书馆,这样就没什么事能让你分心了. 如果一门课让 ...
- sklearn交叉验证-【老鱼学sklearn】
交叉验证(Cross validation),有时亦称循环估计, 是一种统计学上将数据样本切割成较小子集的实用方法.于是可以先在一个子集上做分析, 而其它子集则用来做后续对此分析的确认及验证. 一开始 ...
- mysql查看每个数据库所占磁盘大小
#查看每个数据库所占磁盘大小 SELECT TABLE_SCHEMA AS "库名", , ) AS "表所占空间(MB)", , ) AS "索引所 ...
- Maven安装配置(Windows10)
想要安装 Apache Maven 在Windows 系统上, 需要下载 Maven 的 zip 文件,并将其解压到你想安装的目录,并配置 Windows 环境变量. 所需工具 : JDK 1.8 M ...
- 多线程下载图片,同步下载http://www.importnew.com/15731.html
package mutiDownload; import java.io.IOException; import java.io.InputStream; import java.io.RandomA ...
- 在Qt中配置TBB以及简单实用
最近本人在写离线光线追踪渲染器,但是Qt::QtConcurrent的功能有限,所以就尝试使用了一下,顺便分享一些经验. TBB里面的parallel_for非常适合光线追踪渲染器,而QtConcur ...
- jupyter notebook 远程访问
https://www.youtube.com/watch?v=LpQl0yeZzCU 在服务器端执行: jupyter notebook --ip 服务器的Ip地址 --allow-root --n ...