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 相关文章推荐
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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
YB217、YB235、YB400浅听
2021/03/02 无线电
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
JavaScript简介
2015/02/15 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
javascript中Function类型详解
2015/04/28 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python help函数实例用法
2020/12/06 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
《长相思》听课反思
2014/04/10 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2019秋季运动会口号
2019/06/25 职场文书