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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
Jquery使用val方法读写value值
May 18 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
React中的refs的使用教程
Feb 13 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的Yii框架中进行错误和异常处理
2016/03/17 PHP
php实现session共享的实例方法
2019/09/19 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
Python中django学习心得
2017/12/06 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
《雨点》教学反思
2014/02/12 职场文书
购房意向书
2014/04/01 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
办理护照工作证明
2014/10/10 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
网络妈妈观后感
2015/06/08 职场文书