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代码
Mar 07 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
JavaScript常用事件介绍
Jan 21 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
VUE递归树形实现多级列表
Jul 15 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 引用(&amp;)详解
2009/11/20 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
Python如何快速实现分布式任务
2017/07/06 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
会计专业的自荐信
2013/12/12 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
论文指导教师评语
2014/04/28 职场文书
本科毕业生自荐信
2014/05/26 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
解除合同协议书范本
2016/03/21 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
python保存图片的四个常用方法
2022/02/28 Python