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 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
jquery 上下滚动广告
Jun 17 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
JS继承定义与使用方法简单示例
Feb 19 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 删除记录实现代码
2009/03/12 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python格式化输出%s和%d
2018/05/07 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python logging设置level失败的解决方法
2020/02/19 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
python 5个实用的技巧
2020/09/27 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
医院检讨书范文
2014/02/01 职场文书
职业生涯规划书前言
2014/04/15 职场文书
安全保证书范文
2014/04/29 职场文书
服务之星事迹材料
2014/05/03 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
社区党务工作总结2015
2015/05/19 职场文书
音乐会主持人开场白
2015/05/28 职场文书
力克胡哲观后感
2015/06/10 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Python实现天气查询软件
2021/06/07 Python
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL