使用Element的el-form中自己添加button时点击自动刷新了页面，并跳转到/？。

最新推荐文章于 2023-12-02 09:46:09 发布
最新推荐文章于 2023-12-02 09:46:09 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 分享 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CHENC0518/article/details/124279955
版权
本文介绍如何将HTML按钮修改为El-Button组件，以实现预设样式，并探讨了将元素放置于el-form外部可能遇到的问题及解决策略。

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

  1. 将button的type修改为：type=button（推荐）
  2. 将button变为el-button（样式会发生变化）
  3. 将button放在el-form外面（自己样式可能会出错）

Element-ui中el-table中有form表单元素，实现点击动态添加行
weixin_41346436的博客
09-16 1万+
1：在通过用Element—UI加Admin做后台管理系统的时候，有个需求就是在el-table中的表格中还需要加上form表单元素，比如input元素，且需要点击添加行信息需要实现动态添加行 效果案例图 此处是列表项的源码 <!--表单添加--> <el-button type="success" @click="AddListRow()" round>添加行信息&l...
Vue中使用ElementUI的Form组件时使用 v-if 切换时导致表单自动校验问题
鸭绒的博客
04-10 3374
说明：利用ElementUI的Form表单组件实现登录、注册功能，当chooseItem == 0时是登录模块，否则是注册模块，同时也给表单项添加了校验规则。 示例代码： <template> <el-form v-if="chooseItem == 0" :model="loginForm" :rules="loginRules" ref="loginForm" siz
【已解决！！】el-dialog中el-form里点击button页面自动刷新
最新发布
weixin_61884901的博客
12-02 823
一直用的elementui就不应该混着button用！
elementui el-form 回车页面刷新事件
yun_hou的博客
07-02 5009
问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。 代码如下： <div class="password ft12"> <el-form> <el-form-item label="签约密码：" label-width="95px" prop="pas...
提交表单（form/el-form)时点击提交按钮导致页面刷新的问题
lingliu0824的博客
09-03 3163
由于项目使用了elementui,所以在使用表单时复制了用例，如下图，提交按钮放在了el-form-item中。 但是由于想自己设置button的样式所以把el-button改成了button,并且没有设置type. 问题：在点击按钮时页面会自动刷新，刚开始以为是请求问题，因为一般都是第一次点击会刷新后面在请求就不会刷新了。但是得知第一次虽然会刷新页面看似没有成功请求，但实际后端已经接收到数据并返回了。 why?为什么会有这个问题呢？ W3上有说到： 请始终为按钮规定 type 属性。Internet E
form表单中的button自动刷新页面问题
leechoy
12-26 2391
form表单中的button自动刷新页面问题 form表单中如果存在button的话，有可能会出现一个问题：点击button，触发了页面的自动刷新事件。 原因是因为标签默认的类型是submit，即默认的button点击就会触发表单的提交事件。 <button></button> <!-- 两者是相当的 --> <button type="sumbit"></button> 解决的办法有三个。 1.在标签中添加属性type=“button”。 2
点击el-form-item实现页面跳转
05-31
如果您需要在表单中添加一个用于跳转页面的按钮，可以考虑使用el-button组件，并在按钮的点击事件中编写跳转代码。以下是一个示例代码： ```html <el-form> <el-form-item> <el-button type="primary" @click=...
element-ui如何防止重复提交的方法步骤
12-13
正确的做法是在`<el-dialog>`上添加`@open`事件，初始化时使提交按钮可点击，如`@open="submitButtonDisabled = false"`。验证通过后立即禁用按钮(`this.submitButtonDisabled = true`)，并在最后的回调函数中只处理...
05-vuePC端项目（用户列表，elmentui中的el-card，el-table，el-pagination）
Tangoneone的博客
05-22 1913
完成layout组件中嵌套的用户列表组件 （父）user文件夹下的index.vue： <template> <div class="user"> <!-- 搜索部分 --> <el-card> <el-form inline :model="searchForm" ref="searchRef" label-width="80px"> <el-form-item label="用户名称" pr
基于vue-cli3和element实现登陆页面
10-16
这样，Element UI 就已准备好在项目中使用。 为了在启动项目时自动打开浏览器，我们需要修改`package.json`中的`scripts`部分。找到`"serve": "vue-cli-service serve"`，并在末尾添加`--open`： ```json "scripts...
el-form点击提交会跳转页面/?
愤怒的苹果ext的博客
01-30 744
BaseButton 是我自己封装的button组件。
解决点击button按钮会刷新页面的问题
2301_79420857的博客
11-17 1319
【代码】解决点击button按钮会刷新页面的问题。
使用element插件点击跳转时报错form-item.vue:315 Uncaught (in promise) TypeErelForm.removeField is not a function
xioxi
01-06 3146
问题描述： 使用element插件中的面包屑导航跳转页面，点击后路由地址变了，但是页面内容没变，报错 原因： 如果使用了element中的input、select等插件，但是没有在最外层添加‘<el-form ref=“form” >’，就会报上述错误 解决方法： 添加<el-form ref=“form” ></el-form> <el-form ref="form" > el-form-item label="Activity name">
解决vue中点击button页面刷新问题
qq_43499191的博客
09-26 1372
原因： form表单里的button默认为提交button 在非IE浏览器下会存在点击后刷新页面的问题 解决方法： 在原生button按钮中更改type='button’属性值 此时它变成一个单纯的按钮 使用input标签 设置type=‘button’ 不要将原生button写入form 可以选择使用ui框架中的button组件 转自：https://blog.csdn.net/qq_34917408/article/details/108072606 ...
vue + ElementUI 点击页面内按钮跳转，导航栏选中问题
热门推荐
qq_34117170的博客
06-21 3万+
vue + ElementUI 点击导航栏跳转页面是可以正常跳转高亮的，但通过页面内点击按钮跳转页面就会导致侧边栏不知道该选中那个了，下面说下解决方法 &amp;lt;el-menu class=&quot;sidebar-el-menu&quot; :default-active=&quot;onRoutes&quot; &amp;gt; &amp;lt;/el-menu&amp;gt; onRoutes(
elementUI中登录页form表单重复跳转登陆页
weixin_33915554的博客
10-16 795
Vue项目中使用elementUI的表单组件开发登录框，如果登录button在form表单内会出现重复登录情况，具体情形如下： 原始登录地址如图，点击登录后会再次跳转至登陆页，之后地址变成如下图 多了一个问号，之后再次点击登录可以正常跳转。 原因如下： form表单中的button未指定type，默认将表单提交了，指定type为button后即可解决该问题。之前一直没往form表单提交这方面想，一...
vue项目点击button按钮页面自动刷新问题总结
cabinx的博客
08-18 7212
vue项目点击button按钮页面自动刷新问题总结 1.问题背景： 最近在做的一个vue项目遇到了一个奇葩的问题，在页面中有个弹窗，在弹窗页面搜索条件后点击搜索按钮后，弹窗关闭并自动刷新了当前页面。关键是这个问题还难复现，因为它只是第一次进入页面时才会有闪退刷新页面，后面就正常，要复现这个问题每次要清除缓存且重新进入页面。 2.解决方案： 在查找资料后发现其实这个问题是我使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认的type='submit'这个值时默认具有表单提
element中的el-form里面如果不用el-button,用button的话，要在button放在el-form外面
qq_41629684的博客
03-19 1744
问题现象： 第一次录入时，如果漏填了必填项，点击提交按钮。会刷新界面，所有已填内容都未保存上 问题代码： 问题分析： 在form中的button默认的时候点击时间会执行form的提交事件（相当于默认为submit类型）； 如果需要阻止它,方法有： （1）将button的type修改为：type=button 解决方法： 原来的button换成el-button。或者将button放在el-form外面。 ...
需求：实现点击按钮el-button，生成多个el-form-item；并对el-form-item单独设置表单校验规则
new_Petrichor的博客
07-18 1730
需求：实现点击按钮el-button，生成多个el-form-item；并对el-form-item单独设置表单校验规则
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值