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 获取json数据实现代码
Apr 27 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
vue实现todolist单页面应用
2017/04/11 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python实现ID3决策树算法
2017/12/20 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python logging 日志的级别调整方式
2020/02/21 Python
财务会计人员求职的自我评价
2014/01/13 职场文书
就业意向书范文
2014/04/01 职场文书
优秀高中学生评语
2014/12/30 职场文书
泰山导游词
2015/02/02 职场文书
法务专员岗位职责
2015/02/14 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
食堂卫生管理制度
2015/08/04 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android