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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
javascript 有用的脚本函数
May 07 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 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实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP调用其他文件中的类
2018/04/02 PHP
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
js实现自定义路由
2017/02/04 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
JS实现放烟花效果
2020/03/10 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Python assert语句的简单使用示例
2019/07/28 Python
WxPython实现无边框界面
2019/11/18 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
如何写出好的Java代码
2014/04/25 面试题
运动会入场口号
2014/06/07 职场文书
车辆转让协议书
2014/09/24 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
部门2015年度工作总结
2015/04/29 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
5个实用的JavaScript新特性
2022/06/16 Javascript
Go语言编译原理之源码调试
2022/08/05 Golang