element UI——input输入框只读不写需求设置

最新推荐文章于 2025-03-28 15:09:42 发布
原创 最新推荐文章于 2025-03-28 15:09:42 发布 · 1.4w 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element UI #input #readonly

本文介绍如何在Element UI的El-Input组件中添加readonly属性，实现输入框的只读状态，展示了一段具体的代码实例。

在 el-input标签内添加readonly属性：

<div>
    <p>
        <strong>截至此时，本次按月补贴决算总金额为：</strong>
    </p>
    <el-input v-model="total" style="width:150px;" readonly="true">
    </el-input>
</div>

 

 

【区分vue2和vue3下的element UI Input 输入框组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
05-30 1441
在 Vue 2 中，Element UI 提供了el-input组件用于输入框功能。而在 Vue 3 中，Element UI 没有直接支持 Vue 3，但有一个名为 Element Plus 的项目提供了与 Element UI 类似但支持 Vue 3 的组件集。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中el-input组件的属性、事件和方法，并给出示例。
elementUI 设置input的只读或禁用的方法
01-21
只读：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
前端常用的方法
m0_58680865的博客
12-16 1404
vue+elementUI 1、Table表格中要在最前面添加index索引 <el-table-column type="index" width="50"> </el-table-column> 2、编辑功能把某一个字段设置为无法修改（只读模式），添加 readonly或者disabled ①使用属性 readonly=“true” 方式，输入框或文本域无灰色底； ②使用属性 :disabled=“true” 方式，输入框或文本域有灰色底。 <el
Vue el-input 中 readonly和disabled的区别详解
qq_43071699的博客
07-25 3187
主要区别readonly允许用户选择但不允许修改输入框中的文本，而disabled完全阻止用户与输入框进行任何交互。使用场景readonly更适用于用户需要查看但不需要修改的数据，而disabled适用于需要暂时移除输入框交互能力的情况。视觉反馈disabled输入框在视觉上通常会有更明显的禁用标志，而readonly输入框可能看起来与可编辑的输入框相似，具体取决于浏览器的默认样式和应用的 CSS。
Vue中的显示框/输入框设置为只读方式
TC0221的博客
05-30 2067
此属性用于输入字段为只读，可防止用户对值进行修改，但仍可选中对话框文字。1）disabled=“disabled”：此方法可使输入框变灰色。样式：光标点击是不显示光标的！
element ui 输入框 只读
07-04
在Element UI的`el-input`组件中，如果你想创建一个只读的输入框，你可以设置其`readonly`属性。这是Vue 2中Element UI的用法[^1]: ```html <el-input v-model="inputValue" readonly></el-input> export ...
input输入框只读标签
最新发布
09-04
在 Vue 中，如果你想将 `<input>` 输入框设置为**只读（readonly）状态**，可以通过原生的 `readonly` 属性或者使用 Vue 的动态绑定 `:readonly` 来实现。在 Element UI 中，`<el-input>` 也支持该属性。 --- ### ...
vue 将整个表单设置为只读_elementUI 设置input的只读或禁用的方法
weixin_39531178的博客
12-19 1万+
只读：readonly在data里定义：readonly: true,然后在input框里加上readonly就可以了。禁用：disabled在data里定义：edit: true,然后在input框里加上：:disabled="edit"就可以了PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性通过 disabl...
HTML <input> 标签的 readonly 属性
PHP技术研究
08-20 1534
readonly 属性规定输入字段为只读。 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。 readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。 readonly 属性可与 或 配合使用。
关于elemen-ui的el-inputl框只读或禁用
热门推荐
qq_43791339的博客
02-20 2万+
只读 在data里定义：readonly: true, 然后在el-input框里加上readonly就可以了。 禁用 在data里定义：edit: true, 然后在el-input框里加上：:disabled="edit"就可以了 参考地址请点击 ...
【前端4】表单 编辑模式、只读模式：HTML的`readonly`、el-input的v-if=“isEdit“
定期分享我的发现和想法，感谢你的陪伴和支持
07-16 1736
用户注册与登录：在用户注册时，表单需要处于编辑模式，允许用户输入信息。而在用户查看个人资料时，可以使用只读模式。信息审核：在信息审核页面，审核人员通常只需要查看信息而无需修改，这时可以使用只读模式。数据展示：在数据展示页面，如报告或统计信息页面，使用只读模式可以防止误操作。
el-form表单el-input、el-select只读设置，去掉（删掉）边框线，完美替换整个HTML
hikktn的博客
04-09 1万+
今天为了实现一个叫做表单权限的问题，element官方没有提供这个功能，公司实现了，但是看不到源码，(╥╯^╰╥) 没办法，只能自己上手写代码。 百度了好几篇博客，都好垃圾 。 看效果 这个还只是一个半成品，我先讲讲实现思路。 这是element的官方生成的dom，而我现在想要将里面的元素替换成一段 ‘< label>xx</ label>’ 恕我太菜，居然找不到怎么实现。 尝试了好几种，效果都不太理想。 我们先来看看vue的生命周期，这种数据一定是等数据基本渲染完毕后，我们再去
让文本框＜input＞只读
weixin_63082074的博客
02-24 4290
让文本框只读
el-input在禁用/只读状态下隐藏placeholder提示信息（亲测有效）
weixin_45741044的博客
03-04 1683
点击“查看”按钮，所有组件都是只读状态，若el-input无值则直接显示空，方便用户查看。
设置input输入框为只读方法详解
iteye_16353的博客
07-18 1708
[align=center]设置input输入框为只读方法详解[/align] [b]1.1禁用状态与启用状态[/b] 一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。一个元素可以被激活或获取焦点，则该元素处于启用状态。 [b]1.2设置input输入框为只读方法[/b] 设置文本框为只读，使用户不能修改其中的信息。 例： ...
获取登录信息，绑定在新增输入框，内容只读不可修改
m0_59461654的博客
03-28 165
【代码】获取登录信息，绑定在新增输入框，内容只读不可修改。
el-input
洪君的博客
06-25 2472
input <el-input type="textarea" :autosize="{ minRows:3, maxRows:3}" placeholder="请输入" v-model="form.det" maxlength=...
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
06-23 1万+
1、如何在前端vue中隐藏某一个元素（el-form-item怎样隐藏） 给每项表单项添加一个自己的id名，并用v-model绑定相对应的数据，利用v-if根据上一个表单项的数据值来进行显示或隐藏 <el-form-item id="ShowOrHide" v-mode="showEl" v-if="showEl==true" label="编号" type="hidden" prop="user_id"> <el-input v-model="ruleForm
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值