溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
只讀：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的只讀或禁用的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
