el-input 只读vue
时间: 2024-01-19 21:04:52 浏览: 37
以下是el-input只读的Vue实现方法:
1. 在data中定义readonly为true:
```javascript
data() {
return {
readonly: true
}
}
```
2. 在el-input中加上:readonly="readonly":
```html
<el-input :readonly="readonly"></el-input>
```
3. 如果需要禁用,可以在data中定义edit为false:
```javascript
data() {
return {
edit: false
}
}
```
4. 在el-input中加上:disabled="!edit":
```html
<el-input :disabled="!edit"></el-input>
```
相关问题
el-input 禁止修改
若想禁止修改el-input组件,可以使用属性:readonly或:disabled进行设置。其中,属性:readonly可以让输入框只读,用户无法修改其内容,但仍可以选中或复制文本。而属性:disabled可以使输入框变成不可编辑状态,用户既无法修改内容,也无法选中或复制文本。
如果你使用的是element-ui库的el-input组件,在代码中可以通过设置属性:readonly="true" 或 :disabled="true" 来禁止修改el-input组件。例如:<el-input :readonly="true" /> 或 <el-input :disabled="true" /> 。
需要注意的是,属性disabled的值应为一个布尔值(Boolean),而不是字符串。如果将其设置为字符串"true",将会出现错误提示:"invalid prop: type checked failed for prop 'disabled'. Expected Boolean, got String with value 'true'".<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Html5页面上如何禁止手机虚拟键盘弹出](https://download.csdn.net/download/weixin_38698863/13134515)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue中的el-input设置灰显不可编辑](https://blog.csdn.net/dxjren/article/details/127899136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
el-select只读不可选
el-select可以通过设置disabled属性来实现只读不可选的效果。例如,在el-select标签中添加disabled="disabled"属性即可实现。另外,有些情况下,使用readonly属性可能无效,所以最好使用disabled属性来实现只读不可选的效果。此外,还可以使用Number()函数将值转换为数字,以确保只读不可选的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [如何设置select只读不可编辑且select的值可传递](https://download.csdn.net/download/weixin_38616435/14830457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue下拉框字典映射转换失败 字符转数字parseInt :value 下拉框无法选择 el-select默认选中 设为只读 input...](https://blog.csdn.net/tanzongbiao/article/details/130842602)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]