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提供的本地接口从相册/相机提取 ...
随机推荐
- SQL中笛卡尔积-cross join的用法
在数学中,笛卡尔乘积是指两个集合X和Y的笛卡尓积(Cartesian product),又称直积,表示为X × Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员 假设集合A={a ...
- 让CPU占用率曲线听你指挥
使用GetTickCount()和Sleep(): Code#include <stdio.h> #include <unistd.h> #include <time.h ...
- 【原创】大数据基础之Hadoop(1)HA实现原理
有些工作只能在一台server上进行,比如master,这时HA(High Availability)首先要求部署多个server,其次要求多个server自动选举出一个active状态server, ...
- mysql 动态sql的拼接以及执行、分页
1:建立存储过程,标记参数: ),),)) BEGIN DECLARE start integer; )*limitz; set @sql = 'select * from dsos_vot_drug ...
- Codeforces 1120D Power Tree [最小生成树]
洛谷 Codeforces 这题怎么一个中文题解都没有,是不是你们都认为太水了-- 思路 显然可以用dfs序把每个节点变成给一个区间的叶子节点加上某个数. 显然把叶子序列差分一下变为\(a_1,a_2 ...
- 两个c语言结构体复制的问题
以前一直以为结构体要通过memcpy来复制,现在才明白可直接用“=”复制 C语言中,结构体是一篇连续的内存空间,使用=赋值操作,底层用到的就是memcpy:如果结构体中有指针变量:操作后.两个指针指向 ...
- python学习记录20181207
1.python中函数指针的用法 直接把函数名赋值给变量,不需要加上()和形参 如: def add(num1,num2): return num1+num2 fun = add 2.打印输出列表需要 ...
- springboot配置Druid数据源
springboot配置druid数据源 Author:SimpleWu springboot整合篇 前言 对于数据访问层,无论是Sql还是NoSql,SpringBoot默认采用整合SpringDa ...
- cf1153E 二分思维交互
恶臭的交互题 /* 一个结论:一个矩形将空间分割成两部分,如果开头结尾都在一个部分内,那么穿过矩形边框的线条数就是偶数,反之就是奇数 通过这个结论来进行判断 先询问999次将两个x坐标确定,方法是询问 ...
- Jenkins的详细安装及使用--windows
操作环境:Windows 一.环境准备 1 安装JDK 本文采用jdk-8u111-windows-x64.exe: 2 配置tomcat 本文采用tomcat8,无需安装,配置JAVA_HOME及J ...