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 相关文章推荐
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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中的时间处理
2006/10/09 PHP
PHP仿盗链代码
2012/06/03 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
用js遍历 table的脚本
2008/07/23 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
Python创建xml的方法
2015/03/10 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
用 Python 制作地球仪的方法
2020/04/24 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
社区居务公开实施方案
2014/03/27 职场文书
科技活动周标语
2014/10/08 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
建党伟业电影观后感
2015/06/01 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技