elementUI 设置input的只读或禁用的方法


Posted in Javascript onOctober 30, 2018

只读:readonly

在data里定义:readonly: true,

然后在input框里加上readonly就可以了。

禁用:disabled

在data里定义:edit: true,

然后在input框里加上::disabled="edit"就可以了

PS:下面看下elementui通过 disabled 属性指定是否禁用 input 组件,如何用DOM操作取消disabled 属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>通过 disabled 属性指定是否禁用 input 组件</title>
  <link rel="stylesheet" href="elementui/elementui.css" rel="external nofollow" >
</head>
<body>
  <div id="app">
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
       <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" auto-complete="off" :disabled="true" class="input"></el-input>
       </el-form-item>
       <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
         <el-option label="区域一" value="shanghai"></el-option>
         <el-option label="区域二" value="beijing"></el-option>
        </el-select>
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
       <el-button @click="dialogFormVisible = false">取 消</el-button>
       <el-button type="primary" @click="cancelAttr">确 定</el-button>
      </div>
     </el-dialog>
  </div>
  
</body>
<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="elementui/elementui.js"></script>
<script type="text/javascript">
 new Vue({
    el:'#app',
    data(){
      return{
        dialogFormVisible: true,
        form: {
         name: '',
         region: '',
         date1: '',
         date2: '',
         delivery: false,
         type: [],
         resource: '',
         desc: ''
        },
        formLabelWidth: '120px'
      }
    },
    mounted(){
     
    },
    methods:{
     
     //点击确定的时候取消属性
     cancelAttr(){
       //1.首先我们要拿到input的父class(input)
         //当我们设置disabled属性的时候,父集的class设置成 input el-input is-disabled,首先我们改变父集的class,把父集改成可编辑状态,才能修改input的属性
       const parent = document.querySelector(".input");
       parent.className = "input el-input ";//改变父集的class,把父集改成可编辑状态,
       //2.在设置input属性
         //获取input
       const input = document.querySelector(".input input");
         //设置input的属性为false
         input.disabled = false;
     }
    }
  })
</script>
</html>

elementui通过 disabled 属性指定是否禁用 input 组件,有时候我们会取消单个disabled 属性,那我们如何用DOM操作取消disabled 属性,下面是我走的一下弯路,供大家参考一下,避免再走这样的弯路

总结

以上所述是小编给大家介绍的elementUI 设置input的只读或禁用的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
node.js中的require使用详解
Dec 15 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
js倒计时简单实现代码
Aug 11 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
VUE安装使用教程详解
Jun 03 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 #Javascript
vue通过style或者class改变样式的实例代码
Oct 30 #Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 #Javascript
微信小程序实现左滑修改、删除功能
Oct 19 #Javascript
小程序实现列表删除功能
Oct 30 #Javascript
require.js 加载过程与使用方法介绍
Oct 30 #Javascript
小程序实现左滑删除功能
Oct 30 #Javascript
You might like
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
详解vue-router 初始化时做了什么
2018/06/11 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
django使用xadmin的全局配置详解
2019/11/15 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
2015年招聘工作总结
2014/12/12 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏