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 面向对象全新理练之数据的封装
Dec 03 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
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 JSON格式数据交互实例代码详解
2011/01/13 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
YII框架http缓存操作示例
2019/04/29 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
js图片处理示例代码
2014/05/12 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python更新列表的方法
2015/07/28 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Python自带的IDE在哪里
2020/07/01 Python
python缩进长度是否统一
2020/08/02 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
学习十八大报告感言
2014/02/04 职场文书
企业文化宣传标语
2014/06/09 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
工地材料员岗位职责
2015/04/11 职场文书
个人催款函范文
2015/06/24 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python