el-form输入框无法输入内容

最新推荐文章于 2024-06-25 00:16:15 发布
最新推荐文章于 2024-06-25 00:16:15 发布
阅读量2k 收藏
点赞数 2
分类专栏： vue 文章标签： elementui 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tutouxiaoyaonie/article/details/127014247
版权

项目开发过程中，有两次遇到这种问题

（1）el-form内两个下拉框联动时，例如省份-城市，切换省份后，城市下拉框设置默认值为该省份下第一个城市，做了以下操作：

this.tableForm.city = cityList[0] 

发现一旦city附上默认值，就会出现下次选择数据选择不上的问题，再次选择记录上次选择的value值

（2）表单的el-form-item动态生成，弹出表单时，发现输入框不允许输入内容

解决办法---------------------------------------------------------------------------------------------------------------------

--> 使用this.$forceUpdate()进行强制渲染

el-input添加@input事件，el-select添加@change事件，方法为：

defaultValueChange(){
    this.$forceUpdate();
},

沐沐南
关注
专栏目录
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1350
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为 <el-input v-model="value" @keyup.enter.native="handleEnter"/> 需要在el-form 中阻止表单的默认提交行为 <el-form @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="handleEnter"/> <
el-form内el-select与el-input纵向不对齐的问题
skysys的研究小屋
02-07 5062
解决方法 <el-form :model="form" label-width="100px" size="small"> <el-col :span="8"> <el-form-item label="test1"> <el-input v-model="form.value1" autocomplete="off"></el-input> </el-form-item> </el-c
el-form表单 el-input 点击输入框无反应 无法输入
m0_64491262的博客
07-31 2649
比如有el-form下面有的行加上了el-row，有的没有加上el-row，可能会导致输入框的内容无法输入。也就是要保证el-form-item上面的层级是一致的。解决：最后发现我的问题是由于修改字段时，不小心修改了el-row的层级，导致层级混乱，所以点击无反应。主要是保证输入框绑定的值在data中提前定义好，或者调用$set 进行数据的双向绑定。使用el-form下的el-input 点击无反应 或者无法输入，需要查看。问题：新增框内，只有最上面的基础信息部分无法输入，点击输入框无反应。
＜el-form＞下的输入框无法输入内容，element-plus踩坑记录
weixin_43951592的博客
05-25 627
element-plus, vue3踩坑记录
el-form表单回显，输入框无法输入+resetFields函数失效问题
my_darling_的博客
05-15 440
2、el-form的赋值需要是ref！reactive会导致无法输入；3、重置函数失效大概率是因为初始值拿错了，所以，，，干脆直接放弃--选择form.value = {xxx:"",xxx: ""}的形式。1、检查是否<el-form-item>是否包含prop属性；
el-form输入框不能输入，关闭弹窗后重新打开可以
weixin_43135489的博客
01-10 546
el-form输入框不能输入，关闭弹窗后可以 同步 异步
el-form重置后input无法输入问题
Zing_ing的博客
06-25 1270
是在重置前的formdata的基础上进行的，重置前的formdata与初始化进行比较，将初始化的属性和属性值赋值到现在的formdata中，而方法不会赋值过来，这也就是password为什么没有响应式的原因。在打开dialog直接点击重置后，我们再往password的input中输入，发现会无法输入，这是因为此时password不具有响应式，是新添加的属性。这就导致了在重置时，由于formdata的初始值设置中是有password，所以在重置后，formdata的结构如下。formdata会变成如下。
关于el-form中循环生成el-input，导致无法输入解决
weixin_43569270的博客
08-03 737
使用 $forceUpdate(),强制更新页面后会发现，表单校验失败了，因为绑定的数据没有发生变化，需要采用自定义表单校验，因为是动态表单，自定义验证函数需要卸载methods中。使用 $forceUpdate(),强制更新页面。判断循环表单绑定的数据的变化，进行校验。
vue el-form 表单验证输入框只能输入自然数
且听风吟的博客
09-06 4659
el-form 表单验证的数字验证为： 但是这个验证存在着一些问题，比如可以输入负数，如下所示： 有时候只允许输入自然数，所以需要对输入的负数加以限制，所以就对输入框加 @input 来定义输入，并绑定验证输入的方法： <el-form-item prop="mainType" :label="$t('basicData.device.table.mainType')+'...
怎么设置el-form-item里面的el-input输入框必填？
03-31
你可以在el-form-item里面的el-input输入框中添加一个属性 "required"，这样它就会被设置为必填项。例如： ``` <el-form> <el-form-item label="Username" prop="username" required> <el-input v-model="form....
vue 点击确认禁用el-form中所有el-input输入框
05-10
<el-button type="primary" @click="disableInputs">禁用输入框</el-button> export default { data() { return { username: '', password: '' } }, methods: { disableInputs() { const inputs = this...
解决el-input无法输入的问题和表单验证失败问题
qq_52126119的博客
03-20 4399
1、在el-input组件中使用v-model进行双向数据绑定 2、有时，你会发现我们进行了双向数据绑定了，但是el-input还是无法输入，我们就要使用绑定input事件，然后使用$forceUpdate方法强制刷新，这样子会解决我们el-input无法输入问题，但是这会带出一个新的问题，那就是表单无法进行验证等一些问题。 3、使用$forceUpdate方法强制刷新 ，表单验证失效（表单已经输入值，表单验证显示为空）， 由于此次表单是动态添加的，rules也需要动态添加
Element表单中输入框无法输入
你的阿迁
06-13 2385
一开始我以为是响应式丢失的问题，然后在侦听器中通过set处理这个输入框的数据，这时候已经生效了，但是在多个下拉框多次选择数据及弹层打开关闭的情况下，依然存在之前不能输入的情况。：所遇到的问题是，在表单中有部分输入框是根据下拉框所选择的数据来显示和隐藏的，这时候就遇到有的输入框存在不能输入的问题（可以聚焦，但是输入无效）：在输入框的input事件中调用$forceUpdate() 进行强制刷新。
vue3+el-form表单输入响应式失效问题
nowfuture的博客
05-29 666
中使用el-form时，如果el-form节点的ref属性和model属性同名，会导致输入框无法输入，选择框无法选择，代码如下。修改的办法是：修改成不同的名字就可以解决。
vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题
好好学习天天向上
07-25 1664
原因就是 el-form 声明了ref=“service”，导致 state 中声明的 service 被覆盖，2者冲突了。重构vue2项目时发现的问题，原始项目使用的是。的值一样导致出现了这样的问题。其实vue3可以使用适配的。
el-form动态增减数据的问题，编辑时候input输入不了
m0_52611940的博客
10-23 530
el-form动态增减数据的问题，编辑时候input输入不了
遍历生成form表单后el-input无法输入的情况
qq_38686683的博客
02-16 1651
vue3+typescipt+Element Plus,表单form中el-input无法输入的问题踩坑
el-form表单重置后输入失效
qq_45600228的博客
07-24 282
el-form表单重置后输入失效
Vue中动态渲染输入框并v-model绑定后无法输入
xyf的博客
08-22 7692
最近遇到一个根据后台返回来动态渲染表单的需求，但是input在v-model后无法输入了。 原因：Vue无法检测普通的新增属性 解决：通过this.$set()新增 <el-form :model="form" :inline="true"> <el-form-item v-for="item of data" :label="`${item.desc}：`" :key="item.value"&
el-form-item 输入框充满整个容器
最新发布
10-15
在Element UI的`el-form-item`组件中，如果你想让输入框（通常指`el-input`）占据其容器的整个宽度，你可以通过设置一些CSS样式或者直接配置项来实现。以下是一些常用的方法： 1. **CSS样式**: - 直接给`.el-form-item__label`添加`display: flex; justify-content: space-between;`样式，这会将标签与输入框分开，并使输入框独占剩余空间。 - 或者，如果你只针对输入框设置宽度，可以选中`.el-form-item__content`并将其`width`属性设为`100%`。 ```css .el-form-item { display: flex; } .el-form-item__content { width: 100%; } ``` 2. **Element UI内部配置**: - 如果你想全局设置所有`el-form-item`的输入框宽度，可以在Vue实例的`$el`上绑定一个自定义的样式，例如`<style> .custom-form-item input { width: 100%; }</style>`。 - 如果需要对特定的`el-form-item`进行个性化设置，可以直接在`el-form-item`的`props`选项中，如`prop`、`rules`等属性里添加对应的样式覆盖。 记得在实际应用中检查是否会影响到其他布局需求，因为全宽度的输入框可能会导致文本溢出等问题。如果你有具体的场景需求，可能还需要考虑响应式设计或调整样式优先级。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值