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 相关文章推荐
uploadify 3.0 详细使用说明
Jun 18 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
vue实现文字加密功能
Sep 27 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数组合并array_merge()函数使用注意事项
2014/06/19 PHP
yii操作session实例简介
2014/07/31 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
python使用KNN算法手写体识别
2018/02/01 Python
使用python编写监听端
2018/04/12 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
采购员的工作职责
2013/12/26 职场文书
先进个人获奖感言
2014/01/24 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
团队拓展活动方案
2014/08/28 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
预备党员入党感想
2015/08/10 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
PHP新手指南
2021/04/01 PHP