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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
原生JS轮播图插件
Feb 09 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
js实现录音上传功能
2019/11/22 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python实现类继承实例
2014/07/04 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python列表切片用法示例
2017/04/19 Python
使用python实现kNN分类算法
2019/10/16 Python
Python with标签使用方法解析
2020/01/17 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
会计岗位职责
2013/11/08 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
公司授权委托书
2014/10/17 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
排球赛新闻稿
2015/07/17 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
分享python函数常见关键字
2022/04/26 Python