在实际业务需求中,有些内容当初次创建后,即不可再次进行修改变更,因而需要显示的文本内容不允许变更。此时,可通过页面限制防止用户修改。

方法:添加 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只读方法的更多相关文章

  1. vue v-cloak 指令 处理页面显示源码

    有时候页面会先出现源码,再显示解析的内容.可以通过v-cloak解决 v-cloak 这个指令会作为元素的一个属性一直保持到vue实例编译结束,即解析后移除此指令. /* 含有v-cloak的html ...

  2. layui中radio的动态加载(进入修改页面时,设置radio)

    动态设置   radio  的值让它处于选中状态 效果图 : 前端代码: <div class="layui-form-item"> <label class=& ...

  3. vue的iview列表table render函数设置DOM属性值的方法

    { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ sr ...

  4. vue打包后页面显示空白但是不报错

    在使用vue打包的时候页面显示空白,并且控制台不报错 设置vue-router的时候mode设置为history模式了,这种模式要有后台的配合,一般还是使用哈希模式就不会出现页面空白了.

  5. jsp fmt页面显示value does not support runtime expressions

    最近使用Struts2+Spring3+Mybatis3做一个项目,在用户修改页面显示生日, <fmt:formatDate value="${user.birthday}" ...

  6. PHP页面显示中文字符出现乱码

    [出现问题] php页面显示中文字符出现乱码 [解决方法] 在php页面的代码前插入一行代码即可 header("Content-Type: text/html;charset=utf-8& ...

  7. Chrome扩展修改页面代码执行环境的方法

    Chrome的扩展程序可以通过content scripts向页面中注入js代码,所注入的js代码能够对页面中所有的DOM对象进行操作.由于Chrome在js执行环境上对页面代码和content sc ...

  8. 设置vue启动项目后默认显示的页面

    通过配置路由,可以设置vue项目启动后默认显示的页面.路由的path设置为path:"/",启动项目后就会显示默认的组件页面. import Vue from 'vue' impo ...

  9. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

随机推荐

  1. 关于Activity生命周期的总结

    1.Acitivity的四种状态 (1)运行:位于Activity栈顶,用户可见,可获得焦点. (2)暂停:如果一个活动被另一个非全屏的活动所覆盖(比如一个Dialog),那么该活动就失去了焦点,它将 ...

  2. Java 模拟http请求

    package ln; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRea ...

  3. beta冲刺5/7

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(5/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 ppt制作中 数据集标注 接下来的计划 制作p ...

  4. C# - 获取windows系统特殊文件夹路径

    一.路径分类 1.绝对路径 完整路径,从磁盘符号开始,如:C:\Windows 2.相对路径 以当前路径为起点,不包含磁盘符号,通常使用“..\”符号来访问上级目录中的文件或文件夹. ../Windo ...

  5. 2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest

    A. Automatic Door 对于规律的点可以推公式计算,对于噪点则暴力计算,时间复杂度$O(m\log m)$. #include<stdio.h> #include<ios ...

  6. ZOJ Monthly, March 2018

    A. Easy Number Game 贪心将第$i$小的和第$2m-i+1$小的配对即可. #include<cstdio> #include<algorithm> usin ...

  7. Python 小知识 杂七杂八 随手记

    1.assert 断言语句 例1:    print ‘11111111111’ assert 1==2 print ‘22222222’ 如果没有 assert 程序会输出  ‘1111111111 ...

  8. LOJ #6303. 水题 (约数 质因数)

    #6303. 水题 内存限制 10 MiB 时间限制:1000 ms 标准输入输出 题目描述 给定正整数 n,kn, kn,k,已知非负整数 xxx 满足 n!modkx=0,求 xmaxx_{max ...

  9. 1. js数据类型_对象_函数_内存

    1. js数据类型有哪些? 基本(值)类型 Number ---- 任意数值 String ---- 任意字符串 Boolean ---- true/false undefined ---- unde ...

  10. [LeetCode] Shortest Distance to a Character 到字符的最短距离

    Given a string S and a character C, return an array of integers representing the shortest distance f ...