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提供的本地接口从相册/相机提取 ...
随机推荐
- 关于Activity生命周期的总结
1.Acitivity的四种状态 (1)运行:位于Activity栈顶,用户可见,可获得焦点. (2)暂停:如果一个活动被另一个非全屏的活动所覆盖(比如一个Dialog),那么该活动就失去了焦点,它将 ...
- Java 模拟http请求
package ln; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRea ...
- beta冲刺5/7
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(5/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 ppt制作中 数据集标注 接下来的计划 制作p ...
- C# - 获取windows系统特殊文件夹路径
一.路径分类 1.绝对路径 完整路径,从磁盘符号开始,如:C:\Windows 2.相对路径 以当前路径为起点,不包含磁盘符号,通常使用“..\”符号来访问上级目录中的文件或文件夹. ../Windo ...
- 2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest
A. Automatic Door 对于规律的点可以推公式计算,对于噪点则暴力计算,时间复杂度$O(m\log m)$. #include<stdio.h> #include<ios ...
- ZOJ Monthly, March 2018
A. Easy Number Game 贪心将第$i$小的和第$2m-i+1$小的配对即可. #include<cstdio> #include<algorithm> usin ...
- Python 小知识 杂七杂八 随手记
1.assert 断言语句 例1: print ‘11111111111’ assert 1==2 print ‘22222222’ 如果没有 assert 程序会输出 ‘1111111111 ...
- LOJ #6303. 水题 (约数 质因数)
#6303. 水题 内存限制 10 MiB 时间限制:1000 ms 标准输入输出 题目描述 给定正整数 n,kn, kn,k,已知非负整数 xxx 满足 n!modkx=0,求 xmaxx_{max ...
- 1. js数据类型_对象_函数_内存
1. js数据类型有哪些? 基本(值)类型 Number ---- 任意数值 String ---- 任意字符串 Boolean ---- true/false undefined ---- unde ...
- [LeetCode] Shortest Distance to a Character 到字符的最短距离
Given a string S and a character C, return an array of integers representing the shortest distance f ...