elementUI 设置input的只读或禁用的方法
2018-10-30 14:27
1086 查看
只读: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的只读或禁用的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- element-ui中的select下拉列表设置默认值方法
- javascript createElement()创建input不能设置name属性的解决方法
- input 设置只读方法
- vue使用element-ui的el-input监听不了回车事件的解决方法
- javascript createElement()创建input不能设置name属性的解决方法
- element-ui 设置菜单栏展开的方法
- 设置input标签按tab键时不获取焦点的方法
- 关于使用element-ui的el-input监听不了回车事件
- Win10系统如何关闭Aero Shake功能 win10系统禁用Aero Shake的设置方法
- Element对象的方法:获取和设置属性
- 公司禁用U盘的四种常规设置方法
- [置顶] element-ui 表格实现单元格可编辑的方法
- vue脚手架加载element-ui报错的解决方法
- jquery设置元素的readonly和disabled大全(包括checkbox只读方法)
- input设置只读
- jqery 用 readonly 设置easyui-combobox为只读的方法
- HTML中让表单input等文本框为只读不可编辑的方法
- 设置SQL Server数据库中某些表为只读的多种方法
- html标签padding--设置 btn的背景色,背景颜色方法, input的src属性
- 不在make.conf设置INPUT_DEVICES而跑到package.use里设置的方法[原创]