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

方法:添加 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. fiddler启用过滤规则只显示想要的接口数据

    fiddler启用过滤规则只显示想要的接口数据 比如只显示192.168.11.80站点数据 点击应用规则就可以只显示192.168.11.80了

  2. FM算法(一):算法理论

    主要内容: 动机 FM算法模型 FM算法VS 其他算法   一.动机 在传统的线性模型如LR中,每个特征都是独立的,如果需要考虑特征与特征直接的交互作用,可能需要人工对特征进行交叉组合:非线性SVM可 ...

  3. SQL入门(4): 嵌入式SQL语言

    本节讲述内容: 1.嵌入式SQL 语言概述 2.变量声明与数据库连接 3.数据集与游标 4.可滚动游标与数据库的增删改 5.状态捕捉以及错误处理机制 (一)嵌入式SQL语言 之前我们所学的都是交互式S ...

  4. java设计模式自我总结---适配器模式

    上一篇博客说完了 java 23 中设计模式中的五种 创建性模式,由于篇幅过长,新开一贴今天开始学习结构型模式, 结构型模式包括以下七种:适配器模式.装饰模式.代理模式.外观模式.桥接模式.组合模式. ...

  5. MySQL学习笔记:timediff、timestampdiff、datediff

    一.时间差函数:timestampdiff 语法:timestampdiff(interval, datetime1,datetime2) 结果:返回(时间2-时间1)的时间差,结果单位由interv ...

  6. session简介与生命周期

    session简介 在计算机专业术语中,Session是指一个终端用户与交互系统进行通信的时间间隔,通常指从注册进入系统到注销退出系统之间所经过的时间以及如果需要的话,可能还有一定的操作空间. 具体到 ...

  7. Linux 安装 JDK 8

    1. step1: 下载最新的 Java Archive  # wget --no-cookies --no-check-certificate --header "Cookie: gpw_ ...

  8. 大数据项目之_15_帮助文档_NTP 配置时间服务器+Linux 集群服务群起脚本+CentOS6.8 升级到 python 到 2.7

    一.NTP 配置时间服务器1.1.检查当前系统时区1.2.同步时间1.3.检查软件包1.4.修改 ntp 配置文件1.5.重启 ntp 服务1.6.设置定时同步任务二.Linux 集群服务群起脚本2. ...

  9. mysql 连接超慢

    cd /etc/mysql/mysql.conf.dsudo vi mysqld.cnf加上最后一句skip-name-resolve, 如下:[mysqld]## * Basic Settings# ...

  10. HTML入门6

    这篇将简单会编写网页整体网站架构,通过HTML来表示网站结构. 标题<header>,通常顶部有个大标题或图标,是网站的主要常见信息,存在于每个网页 导航<nav>,通常包含菜 ...