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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
javascript中json基础知识详解
Jan 19 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
vue中nextTick用法实例
Sep 11 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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性能优化的介绍
2013/06/20 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
浅析php单例模式
2014/11/25 PHP
php图像处理类实例
2015/07/28 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
python中使用zip函数出现错误的原因
2018/09/28 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
团队精神演讲稿
2013/12/31 职场文书
班级口号大全
2014/06/09 职场文书
安全生产工作汇报
2014/10/28 职场文书
个人专业技术总结
2015/03/05 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
Python实现byte转integer
2021/06/03 Python