1.项目之前遇到过此问题 用css处理即可，这里我写了个demo总结下
需求：要输入框/下拉框禁止输入点击效果，并且显示禁止符号
(通常情况下 输入框/下拉框外面还有一个父元素)
一般我们肯定会给父元素和子元素用属性 cursor: not-allowed;
问题：但是惊奇的发现输入框鼠标划过有禁止符号，但是还可以输入内容？？
解决：要想让输入框既有禁止符号显示，又禁止输入，需要在子元素中添加属性 pointer-events: none;
注：如果在父元素中添加属性 pointer-events: none; 会导致鼠标放上去虽然不能点击了，但显示的是箭头 而不是禁用符号，
因为设置的 pointer-events:none; 把所有点击事件全部禁掉了，cursor 也没有了
1 div { 2 width: 300px; 3 height: 120px; 4 background-color: grey; 5 cursor: not-allowed; 6 /* 居中 */ 7 position: relative; 8 display: table-cell; 9 text-align: center; 10 vertical-align: middle; 11 } 12 .el-input { 13 height: 40px; 14 width: 80%; 15 cursor: not-allowed; 16 pointer-events: none; 17 } 18 19 <div> 20 <el-input v-model="input" placeholder="请输入内容"></el-input> 21 </div> 22 23 data: { 24 input: ‘‘ 25 },
由于截不出效果图，贴张demo样式图，大家自行脑补下吧
原文：https://www.cnblogs.com/hanhanours/p/13808407.html