Vue+element ，el-form 中的控件点击没反应问题

最新推荐文章于 2025-05-15 15:47:40 发布
最新推荐文章于 2025-05-15 15:47:40 发布
阅读量6.2k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 vue Element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41562512/article/details/89096297
本文讲述了在使用el-row组件时可能出现的问题，即导致el-form中的控件无法获得焦点，进而无法响应点击事件。提供了两种解决方案：一是完全移除el-row；二是谨慎地重新引入el-row，具体实践请参考CDP文件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

el-row要慎用，可能会导致el-form 中的控件点击没反应，就是根本都不会获取到焦点，解决办法：
1、删掉所有的el-row
2、在某些地方添加el-row，详见CDP文件

vue el-select 省市区三级联动 vue + element-ui使用第三方插件实现省市区三级联动
weixin_41346436的博客
03-11 599
【代码】vue el-select 省市区三级联动 vue + element-ui使用第三方插件实现省市区三级联动。
vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构
高级前端工程师
03-20 3660
vue2，vue3，elementUI，element plus，Tree树形控件，el-tree，el-tree实现多选、反选，tree组件展开/折叠及全选/分组全选实现，element的树表格和树形控件折叠展开方法，element tree 如何全部展开、全部折叠，elmentui中树结构el-tree 多选功能，element el-tree折叠收缩，el-tree实现一键全选、反选功能，element Tree 树形控件 折叠、展开 全选、清空，树形结构全选、取消全选，展开收起，element中Tr
＜el-form＞标签与＜el-col＞之间的套用导致点击无效的问题
weixin_43873156的博客
07-01 2139
编写简单的<el-form>表单时，可以使用<el-col>用来进行布局，让相关的组件放在同一行。但是今天使用时发现有两个问题： <el-row> <el-col> </el-col> </el-row> ①如果用上以上这样的格式，布局无效 ②如果不用<el-row>标签，则form表单的组件点击无效 问题原理： 经过查找之后发现，源码中在el-form-item.vue的代码...
vue elementUI select下拉点击事件无反应解决
疑问 搜索 动手 解决 记录
08-21 5214
点击下图中的select列表时,无法触发点击事件 代码为 解决办法为: <el-form-item label="指定创建部门" v-if="form.navigationLevel ==2" prop="deptId "> <!-- <el-input v-model="form.deptId " placeholder="请选择部门名字"/> --> <el-select v-model="fo
Element Plus 取消el-form-item点击触发组件，改为原生表单控件
最新发布
i_am_a_div的博客
05-15 698
Element Plus 取消el-form-item点击触发组件，改为原生表单控件
el-row el-col使用bug，点击怎么点不动啊，输入框也输不了内容
weixin_54495706的博客
03-08 776
记录问题：今天在el-row里面又写了一个el-row，结果表单里的一个输入框点不了了，检查发现，第二个el-row覆盖了内容，导致点击的还是第二个el-row。
AJAX+VUE+Element项目过程中出现el-button中点击事件没有没有响应
qq_44151022的博客
03-03 3186
出现的问题： 我们希望在点击提交按钮之后，能够跳转到addBrand函数中，并执行函数。 但是实际过程中我们发现，点击之后并没有任何反应。因此我们怀疑是点击按钮之后并没有跳转到函数并执行。 通过百度搜索得知可以通过修改@click -> @click.native解决这个问题。 然而我们修改完毕之后发现并没有作用。 于是我们开始寻找其他的方法。 在函数addBrand中添加日志文件，然后执行项目，并且在浏览器端发现点击按钮时，实际上已经执行了addBrand函数，并且已经执行了add se
vue+element 中表单提交el-form+上传组件el-upload
热门推荐
qq_42894622的博客
06-22 2万+
页面效果 html代码：弹框：表单中包含图片上传的组件el-upload //html <!-- 弹框 --> <div class="dialog"> <el-dialog :title="formTitle" :visible.sync="dialogFormVisible"> <el-form :model...
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
本文将探讨在Vue中动态生成`el-checkbox`并解决点击无法正确赋值的难题。 首先，我们要理解问题的背景。在描述中提到，数据结构是动态生成的，如： ```javascript export default { data() { return { form: {}...
vue+elementui–el-select控件实现三级联动
qq_34420739的博客
02-23 9489
vue+elementui–el-select控件实现三级联动 实现思路：将三个el-select控件的下拉选项数据放在一个数组对象中。 联动关系如下: 三个el-select控件绑定数据对象设计如下： selectData:{ A:"" }
form表单中button @click事件失灵（两种思路解决）
2301_76607875的博客
04-09 3367
IE 浏览器 的按钮默认 type 是 button，而其他浏览器中 type 的默认是 submit。我用的浏览器不是IE， 所以button 的 onclick 事件会被 form 的 action 所取代。一开始我的想法是，点击搜索按钮执行 jump() 方法，将输入框内容传到新页面，但是实际情况是，点击搜索按钮后，页面无跳转（一点反应都没有），最后在同事帮助下，得到应该将input外嵌套的 form 标签删除，在删除后，页面成功跳转。我在做后端功能测试时自己写了简单前端页面，发现了此问题。
vue elementUI el-form 数据无法赋值且不报错解决方法
xuelong的博客
12-25 1598
vue项目中使用elementUI的el-form组件，里面有部分后端数据遍历的字段和部分确定的字段。
vue elementi-ui表单项无法选中问题
菜鸡记录集
11-26 855
VUE 项目中表单项不能选中问题 <el-form> <el-col :span="6"> <el-form-item label="开票时间" prop="billingDate"> <el-date-picker v-model="dataForm.billingDate" type="date" value-format="yyyy-MM-dd" placeholder="选择开票时间"
因el-col布局引起的表单项无法点击的问题
全干攻城狮
10-22 3564
问题缘由 近日需要开发一个双列的表单编辑页面，伪页面如下： 简单思索后决定使用el-col控制表单项宽度以达到双列的效果 问题出现 由于难度不大，三下五除二就搞定了，伪代码如下： <el-form :model="edit.data" label-width="100px"> <el-col :span="12"> <el-form-item prop="name" label="用户名: "> &
vue3中使用el-form跟el-select时出现不能选中的问题
mini_1251861209的博客
03-08 1580
检查el-form的ref跟model是否同名了， 如果同名了，会出现很多未知的bug，比如ref双向绑定的数据可以打印，但是属性读不到之类的错误
button添加到label上不能响应的问题解决
三爺不爱敲代码
05-05 4200
当我在技术讨论组里面发出这个问题时，有同学就直接质疑：label里面怎么可以加button呢？？？ 一开始我还笑话这位同学呢，UIButton和UILabel都是继承于UIView的，怎么不可以添加！！！ 但是，你在storyboard活着xib里面往label拖button怎么拖也拖不进去，系统始终会将button直接放在label的父视图上，所以我也怀疑了。 再但是，你用纯代码写上面的操
element-ui子弹窗出现遮罩层无法点击
Vitaliner
05-19 1714
问题: 最近在写一个弹窗组件,弹窗组件里面又嵌套着一个弹窗,当打开这个子弹窗时发现会出现一个遮罩层导致无法点击 解决方法: 需要在子弹窗上增加一个append-to-body属性 总结: 平时应该多看看官方文档,以免掉坑 关于弹窗Dialog组件: Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。 如果 visible 属性绑定的变量位于 Vuex 的 s
form表单中使button点击后不起作用的方法和原理
maweimaweima4的专栏
10-17 1651
event             资源公告管理                                       发布                 onclick="window.location.href = '/resrepo-webapp/admin/notice!input.action'; if(event.preventDefault){e
帮我用vue+element-ui封装个el-tabs 下分块包含 el-form的组件
03-24
好的，我可以为您编写一个 Vue Element-UI 组件，以封装具有 el-tabs 和 el-form 的类似于分块的组合控件。这是一个样例代码，供您参考： ``` <el-tabs> <el-tab-pane label="Tab 1"> <el-form> ... </el-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值