本文介绍 elementUI 中 Input 组件的只读（readonly）与禁用（disabled）状态设置方法。通过 data 定义属性并绑定至 input 标签即可实现。此外，文章还探讨了如何通过原生 DOM 操作动态取消单个 input 的 disabled 属性，提供相关代码示例与注意事项，帮助开发者避免常见误区。
Input 组件只读与禁用的基本设置
实现只读效果：readonly
在 Vue 的 data 中定义属性：readonly: true,
随后在 input 输入框元素上添加 readonly 属性即可生效。
实现禁用效果：disabled
在 data 中定义控制变量：edit: true,
在 input 输入框上绑定动态属性：:disabled="edit" 即可实现禁用。
通过 DOM 操作取消禁用属性
补充说明：elementUI 通过 disabled 属性来控制 input 组件的禁用状态。有时需要动态取消单个 input 的 disabled 属性，以下是通过 DOM 操作实现该功能的示例，供参考以避免类似弯路。
<!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的只读或禁用的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！