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

方法:添加 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. Linux日志每日备份脚本

    2018-5-28 10:59:07 星期一 原理是: 1. 每天0点0分crontab执行备份脚本 2. 先将当前日志文件copy一份作为备份, 备份文件名的后缀为前一天 3. 用当前日志的最后50 ...

  2. 帆软报表(finereport)参数组合/下拉参数联动

    首先实现下拉参数联动 1.参数的定义→添加控件绑定数据→参数过滤和参数面板样式 下拉复选框控件注意事项:select * from tablewhere 1=1${if(len(控件名称)=0,&qu ...

  3. 51nod--1006 最长公共子序列Lcs (动态规划)

    题目: 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为: abcicba abdkscab ab是两个串的子序列,abc也是,abca也是,其中abca是这两个 ...

  4. Laravel 生成migration ,boolean字段字段转为tinyInteger

    Schema::create('consults', function (Blueprint $table) { $table->increments('id'); $table->str ...

  5. 【原创】大叔问题定位分享(15)spark写parquet数据报错ParquetEncodingException: empty fields are illegal, the field should be ommited completely instead

    spark 2.1.1 spark里执行sql报错 insert overwrite table test_parquet_table select * from dummy 报错如下: org.ap ...

  6. Java并发编程的4个同步辅助类

    Java并发编程的4个同步辅助类(CountDownLatch.CyclicBarrier.Semphore.Phaser) @https://www.cnblogs.com/lizhangyong/ ...

  7. SQL入门(1): 创建/查询/更新/连接/视图/SSMS简介

    本文介绍SQL的基本查询语句 (1) select... from  * 表示全部, 选择的东西还可以进行简单的运算, 可以列别名 select * from student; -sage from ...

  8. Intellij Idea 2016创建web项目

    一.创建简单web项目 1.创建一个web project File -> new Project ->选择project sdk 为1.8(已经配过环境变量)其他不要选 -> Ne ...

  9. Win10安装java环境

    window系统安装java 一.下载JDK 1.首先需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downl ...

  10. git更新Activemq在远程github上指定版本的源码步骤

    第一步:根据地址克隆源码 (activemq-5.9) $  git  clone   https://github.com/apache/activemq.git 第二步:查看远程源码的版本清单 ( ...