elementUI 设置input的只读或禁用的方法

来源：动视网责编：小采时间：2020-11-27 22:05:34

elementUI 设置input的只读或禁用的方法

elementUI 设置input的只读或禁用的方法:只读：readonly 在data里定义：readonly: true, 然后在input框里加上readonly就可以了。禁用：disabled 在data里定义：edit: true, 然后在input框里加上：:disabled=edit就可以了 PS：下面看下elementui通过 disabled

推荐度：

点击下载本文 文档为doc格式

导读elementUI 设置input的只读或禁用的方法:只读：readonly 在data里定义：readonly: true, 然后在input框里加上readonly就可以了。禁用：disabled 在data里定义：edit: true, 然后在input框里加上：:disabled=edit就可以了 PS：下面看下elementui通过 disabled

禁用：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的只读或禁用的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

elementUI 设置input的只读或禁用的方法

推荐度：

点击下载本文 文档为doc格式

标签：设置方法禁用

热门焦点

elementUI 设置input的只读或禁用的方法

elementUI 设置input的只读或禁用的方法

elementUI 设置input的只读或禁用的方法

最新推荐

猜你喜欢

热门推荐