Readonly
Definition in data: readonly: true,
Then add readonly to the input box.
Disabled
Definition in data: edit: true,
Then add::disabled="edit" in the input box
PS: Let's see if elementui uses the disabled attribute to specify whether to disable the input component, and how to use DOM operations to cancel the disabled attribute
<!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>pass disabled Attribute Specifies whether to disable input Components</title>
<link rel="stylesheet" href="elementui/" rel="external nofollow" >
</head>
<body>
<div >
<el-dialog title="Shipping Address" :="dialogFormVisible">
<el-form :model="form">
<el-form-item label="Activity Name" :label-width="formLabelWidth">
<el-input v-model="" auto-complete="off" :disabled="true" class="input"></el-input>
</el-form-item>
<el-form-item label="Activity Area" :label-width="formLabelWidth">
<el-select v-model="" placeholder="Please select the active area">
<el-option label="Region One" value="shanghai"></el-option>
<el-option label="Region Two" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">Pick remove</el-button>
<el-button type="primary" @click="cancelAttr">Confirm Certainly</el-button>
</div>
</el-dialog>
</div>
</body>
<script type="text/javascript" src="vue/"></script>
<script type="text/javascript" src="elementui/"></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:{
//Cancel attribute when clicking OK cancelAttr(){
//1. First we need to get the parent class(input) of the input //When we set the disabled attribute, the class of the parent set is set to input el-input is-disabled. First, we change the class of the parent set and change the parent set to editable state to modify the input attribute. const parent = (".input");
= "input el-input ";//Change the class of the parent set and change the parent set to editable state. //2. Set the input property //Get input const input = (".input input");
//Set the input property to false = false;
}
}
})
</script>
</html>
Elementui specifies whether to disable the input component through the disabled attribute. Sometimes we cancel a single disabled attribute. How do we use DOM operations to cancel the disabled attribute? Here is a detour I took for your reference to avoid taking such detours.
Summarize
The above is the method of setting the elementUI to you to read-only or disable the input. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!