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

最新推荐文章于 2024-02-02 14:53:32 发布
最新推荐文章于 2024-02-02 14:53:32 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： 分享 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CHENC0518/article/details/124279955
版权
  1. 将button的type修改为：type=button（推荐）
  2. 将button变为el-button（样式会发生变化）
  3. 将button放在el-form外面（自己样式可能会出错）

陈不知代码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue-cli3和element实现登陆页面
10-16
这样，Element UI 就已准备好在项目中使用。 为了在启动项目时自动打开浏览器，我们需要修改`package.json`中的`scripts`部分。找到`"serve": "vue-cli-service serve"`，并在末尾添加`--open`： ```json "scripts...
提交表单（form/el-form)时点击提交按钮导致页面刷新的问题
lingliu0824的博客
09-03 2899
由于项目使用了elementui,所以在使用表单时复制了用例，如下图，提交按钮放在了el-form-item中。 但是由于想自己设置button的样式所以把el-button改成了button,并且没有设置type. 问题：在点击按钮时页面会自动刷新，刚开始以为是请求问题，因为一般都是第一次点击会刷新后面在请求就不会刷新了。但是得知第一次虽然会刷新页面看似没有成功请求，但实际后端已经接收到数据并返回了。 why?为什么会有这个问题呢？ W3上有说到： 请始终为按钮规定 type 属性。Internet E
vue中element-ui添加按钮
weixin_30340775的博客
07-03 3997
<div v-for="(v,i) in list"> <el-form label-width="120px" size="small"> <el-row :span="24"> <el-col :span="11"> <el-form-i...
【已解决！！】el-dialog中el-form里点击button页面自动刷新
weixin_61884901的博客
12-02 639
一直用的elementui就不应该混着button用！
阻止 form 表单 input 回车触发 button 按钮 click 事件
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
06-15 2210
如上代码，在 input 输入框中按下回车键会自动触发 Action 事件，这就会影响业务流程，也算是个bug，但这是为什么呢？方法1：给 button 加 type 类型 方法2：给 input 加阻止回车鼠标事件 相关链接 vue 阻止事件冒泡，捕获方法 阻止 form input 输入框按回车自动提交表单...
解决点击button按钮会刷新页面的问题
2301_79420857的博客
11-17 756
【代码】解决点击button按钮会刷新页面的问题。
解决vue中点击button页面刷新问题
qq_43499191的博客
09-26 1257
原因： form表单里的button默认为提交button 在非IE浏览器下会存在点击后刷新页面的问题 解决方法： 在原生button按钮中更改type='button’属性值 此时它变成一个单纯的按钮 使用input标签 设置type=‘button’ 不要将原生button写入form 可以选择使用ui框架中的button组件 转自：https://blog.csdn.net/qq_34917408/article/details/108072606 ...
element-ui如何防止重复提交的方法步骤
12-13
正确的做法是在`<el-dialog>`上添加`@open`事件，初始化时使提交按钮可点击，如`@open="submitButtonDisabled = false"`。验证通过后立即禁用按钮(`this.submitButtonDisabled = true`)，并在最后的回调函数中只处理...
vue2.0结合Element-ui实战案例
10-17
在`UserInfo.vue`页面中，可以利用Element-UI的`el-form`、`el-button`、`el-table`等组件创建用户信息管理界面。例如，使用`el-table`展示用户信息，通过`el-form`进行查询，并用`el-button`添加新用户。`el-table-...
搭建脚手架使用vue+element实现的后台管理系统模板
06-16
2. **组件使用**：Element UI提供了诸如按钮、表格、对话框、通知、布局等常见组件，可以直接在Vue组件中使用。例如，使用按钮组件 `<el-button>按钮</el-button>`。 3. **主题定制**：Element UI支持自定义主题，...
vue-element
08-09
3. **Element UI组件**：项目中会大量使用Element UI提供的组件，例如在`views`中的各种页面中，可以看到`<el-table>`、`<el-form>`、`<el-button>`等元素。 4. **路由配置**：`router/index.js`文件会定义应用的...
elementui el-form 回车页面刷新事件
yun_hou的博客
07-02 4855
问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。 代码如下： <div class="password ft12"> <el-form> <el-form-item label="签约密码：" label-width="95px" prop="pas...
form表单中的button自动刷新页面问题
leechoy
12-26 2131
form表单中的button自动刷新页面问题 form表单中如果存在button的话，有可能会出现一个问题：点击button，触发了页面的自动刷新事件。 原因是因为标签默认的类型是submit，即默认的button点击就会触发表单的提交事件。 <button></button> <!-- 两者是相当的 --> <button type="sumbit"></button> 解决的办法有三个。 1.在标签中添加属性type=“button”。 2
用button提交表单php,JavaScript在form表单中使用button按钮实现submit提交方法
weixin_32597009的博客
03-11 1735
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上。在form表单提交中，使用button来间接完成submit的提交更为灵活。下面是实现方法：使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在JavaS...
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...
el-form前端表单校验步骤详细
YLJ25800的博客
10-20 5609
笔记
ElementUI 之el-form表单重置功能按钮
zhouzhiwengang的专栏
07-18 5569
业务场景： 使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性。 <el-form :inline="true" :model="queryParams" ref="queryForm"> 第二：在点击重置按钮执行的方法中，执行如下功能代码片段 reset(){ # 重新设置请求参数实体属性 this.queryParams = {
vue3通过js触发el-button的点击事件
最新发布
nlhhln的博客
02-02 1198
项目登录页，需要点击登录按钮，实现一些需求，因为回车键也绑定了，想通过js实现触发，虽然问题没解决，但分享下触发方法。
vue项目点击按钮（或回车）页面刷新问题
m0_46814663的博客
09-25 487
今天在开发过程中遇到一个问题：当点击查询按钮时，调用查询方法后页面重新刷新，导致查询到得数据无法显示。分析问题发现，是因为使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认type='submit'这个属性值是默认具有表单提交功能的，所以在非IE浏览器下会存在点击后刷新页面的问题。
点击el-form-item实现页面跳转
05-31
如果您需要在表单中添加一个用于跳转页面的按钮，可以考虑使用el-button组件，并在按钮的点击事件中编写跳转代码。以下是一个示例代码： ```html <el-form> <el-form-item> <el-button type="primary" @click=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值