只读：readonly

在data里定义：readonly: true,

然后在input框里加上readonly就可以了。

禁用：disabled

在data里定义：edit: true,

然后在input框里加上：:disabled="edit"就可以了

PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性

通过 disabled 属性指定是否禁用 input 组件

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;

}

}

})

elementui通过 disabled 属性指定是否禁用 input 组件，有时候我们会取消单个disabled 属性，那我们如何用DOM操作取消disabled 属性，下面是我走的一下弯路，供大家参考一下，避免再走这样的弯路

总结

以上所述是小编给大家介绍的elementUI 设置input的只读或禁用的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！