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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
jquery实用代码片段集合
Aug 12 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
javascript call和apply方法
2008/11/24 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
js实现tab切换效果
2017/02/16 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
axios实现简单文件上传功能
2019/09/25 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
Python返回真假值(True or False)小技巧
2015/04/10 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
python实现微信远程控制电脑
2018/02/22 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
python interpolate插值实例
2020/07/06 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
2014年销售工作总结与计划
2014/12/01 职场文书
圣诞晚会主持词
2015/07/01 职场文书
三年级作文之趣事作文
2019/11/04 职场文书