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复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 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
Google 静态地图API实现代码
2010/11/19 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python 含参构造函数实例详解
2017/05/25 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
django-filter和普通查询的例子
2019/08/12 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
自主招生自荐信格式
2013/12/03 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
演讲稿开场白台词
2014/08/25 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
汽车车尾标语大全
2015/08/11 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
导游词之安徽九华山
2019/09/18 职场文书
导游词之青城山景区
2019/09/27 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技