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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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/06/13 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python 变量类型及命名规则介绍
2013/06/08 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Python的几种主动结束程序方式
2019/11/22 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Python timeit模块原理及使用方法
2020/10/10 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
优秀演讲稿范文
2013/12/29 职场文书
法制宣传标语集锦
2014/06/25 职场文书