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 相关文章推荐
jquery入门—访问DOM对象方法
Jan 07 Javascript
js特殊字符转义介绍
Nov 05 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
微信小程序按钮点击动画效果的实现
Sep 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
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
初学Python函数的笔记整理
2015/04/07 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
结婚典礼证婚词
2014/01/08 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
政治学求职信
2014/06/03 职场文书
鼋头渚导游词
2015/02/05 职场文书
行政答辩状范文
2015/05/21 职场文书
新闻报道稿范文
2015/07/23 职场文书
电力安全学习心得体会
2016/01/18 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书