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 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
详解vue组件基础
May 04 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 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
一个简洁的多级别论坛
2006/10/09 PHP
浅析php原型模式
2014/11/25 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python绘制直方图和密度图的实例
2019/07/08 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
Django 解决由save方法引发的错误
2020/05/21 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
日语专业个人的求职信
2013/12/03 职场文书
执行力心得体会
2013/12/31 职场文书
五年级科学教学反思
2014/02/05 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
公司员工奖惩制度
2015/08/04 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
Python实现单例模式的5种方法
2021/06/15 Python
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript