只读：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>
< charset=\"UTF-8\">
< name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
< http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
< >通过 disabled 属性指定是否禁用 input 组件</ >
< rel=\"stylesheet\" href=\"elementui/elementui.css\" rel=\"external nofollow\" >
</head>
<body>
<div id=\"app\">
<el-dialog =\"收货地址\" :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>
< type=\"text/ \" src=\"vue/vue.min.js\"></ >
< type=\"text/ \" src=\"elementui/elementui.js\"></ >
< type=\"text/ \">
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;
}
}
})
</ >
</html>
elementui通过 disabled 属性指定是否禁用 input 组件，有时候我们会取消单个disabled 属性，那我们如何用DOM操作取消disabled 属性，下面是我走的一下弯路，供大家参考一下，避免再走这样的弯路
总结
以上所述是小编给大家介绍的elementUI 设置input的只读或禁用的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
继续阅读与本文标签相同的文章
-
带你校园一日游 雷诺自动驾驶打车测试项目对外揭秘
2026-05-19栏目： 教程
-
我终于搞清楚了和String有关的那点事儿。
2026-05-19栏目： 教程
-
巧用这19条MySQL优化，效率至少提高3倍
2026-05-18栏目： 教程
-
谷歌新品发布会，也是谷歌摄影成果展
2026-05-18栏目： 教程
-
测试开发进阶(三十一)
2026-05-18栏目： 教程