ElementUI中input回车触发页面刷新问题及其解决方法

news/2024/11/20 7:20:24/

在日常的开发过程中,你可能会遇到一个问题:在ElementUI的el-form表单中,如果只存在一个el-input输入框,当你输入值后按下回车,页面会发生刷新。这是因为当form元素中只有一个输入框时,按下回车将触发表单的默认提交事件,这是W3C标准的规定。

解决方法:

ElementUI也给出了解决方法。如果你希望阻止这一默认行为,可以在<el-form>标签上添加@submit.native.prevent。例如:

<el-form :model="form" ref="form" label-width="200px" class="form" @submit.native.prevent
><el-form-itemlabel="姓名"prop="name"><el-input v-model.number="form.name"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submit('form')">提交</el-button><el-button @click="reset('form')">重置</el-button></el-form-item>
</el-form>

然而,上述方法只是阻止了默认行为,如果你仍需要回车来提交表单,你可以通过以下方式解决:

<el-form :model="form" ref="form" label-width="200px" class="form" @submit.native.prevent="() => submit('form')"
><el-form-itemlabel="姓名"prop="name"><el-input v-model.number="form.name"></el-input></el-form-item><el-form-item><el-button type="primary" native-type="submit">提交</el-button><el-button @click="reset('form')">重置</el-button></el-form-item>
</el-form>

请注意以下几点:

  • 确保使用 @submit.native.prevent 阻止原生事件,执行方法为搜索按钮按click事件
  • 搜索按钮需要被包裹在 el-form 中
  • 移除搜索按钮的click事件
  • 确保增加 native-type="submit" 属性

此外,原生的form表单的单input和form包裹el-input回车刷新的问题也可以解决,有以下几种方法:

  1. 在form表单内再增加一个隐藏的input框,可以通过hidden定义隐藏的输入字段,或者通过CSS样式进行隐藏。

  2. 去掉输入框的回车事件(根据需求来定,有的需要回车事件提交表单来查询或者执行其他操作则该方法不适用)。

  3. 阻止表单默认提交事件。例如,使用onsubmit句柄返回false来阻止原生form内的input的默认提交事件。


为了帮助大家更好地理解和解决这个问题,你可以参考ElementUI的官方解决这个回车刷新页面的方案,其开源地址为:

https://github.com/ElemeFE/element/blob/a0e82aa8ac58d68e66992a5632b779a901436879/examples/docs/zh-CN/form.md

希望这些方法能够帮助你解决ElementUI中input回车触发页面刷新的问题。如果你有任何进一步的问题或需要其他帮助,欢迎随时提问。


http://www.ppmy.cn/news/225162.html

相关文章

Zinx框架学习 - 连接管理

Zinx - V0.9 连接管理 每个服务器的能够处理的最大IO数量是有限的&#xff0c;根据当前服务器能开辟的IO数量决定&#xff0c;最终决定权是内存大小现在我们要为Zinx框架增加链接个数的限定&#xff0c;如果超过⼀定量的客户端个数&#xff0c;Zinx为了保证后端的及时响应&…

掌握了这些技术后,才发现进大厂,也没有那么难...

为了帮助大家快速回顾学习软件测试中的知识点&#xff1a;这套学习笔记&#xff0c;面试手册是由多位一线大牛老师联手打造3个月制作而成&#xff0c;几乎涵盖了所有的软件测试技术栈。掌握它们才发现进大厂&#xff0c;也没有那么难 全网首发&#xff01;非常珍贵&#xff0c…

volatile - (C语言)

volatile关键字和const一样都是一种类型修饰符&#xff0c;用它修饰过的变量表示可以被某些编译器未知的因素更改&#xff0c;比如操作系统、硬件或者是其它线程等。 该关键字是不希望被编译器优化&#xff0c;从而达到稳定访问内存的目的。 示例代码&#xff1a; #include&…

DNS是什么意思?DNS有什么用?(中科三方)

DNS&#xff0c;是Domain Name System的首字母缩写&#xff0c;中文译作“域名系统”&#xff0c;是记录了域名与IP地址相互映射关系的一个分布式数据库&#xff0c;它使用户通过域名就可以访问互联网&#xff0c;而无需记住复杂容易混淆的IP数字串。 DNS的作用 我们知道计算…

如何设计一个安全的对外接口 ?

前言 最近有个项目需要对外提供一个接口&#xff0c;提供公网域名进行访问&#xff0c;而且接口和交易订单有关&#xff0c;所以安全性很重要&#xff1b;这里整理了一下常用的一些安全措施以及具体如何去实现。 安全措施 个人觉得安全措施大体来看主要在两个方面&#xff0…

如何下载最新的苹果2021年供应商名单?

苹果公布了2021年最新的供应商名单&#xff0c;三步获取最新的PDF文件 第一步&#xff1a;打开工业快搜IOSearch 第二步&#xff1a;输入apple supplier list 并搜索&#xff0c;选择文件格式为PDF 第三步&#xff1a;点击预览后即可下载啦

2021年中国苹果及苹果加工品进出口情况:我国苹果干进出口均价均有所上涨[图]

一、现状 苹果在中国的历史已经很悠久&#xff0c;苹果在中国已经有两千多年的栽培历史。2015-2020年中国苹果种植面积总体稳定&#xff0c; 2020年中国苹果种植面积1942.5千公顷&#xff0c;较2019年增加2.48千公顷。 2015-2020年中国苹果种植面积&#xff08;千公顷&#xf…

ROS:参数的使用与编程方法

目录 一、参数模型二、 创建功能包三、参数命令行的使用(rosparam)四、使用程序来使用参数&#xff08;C&#xff09;4.1创建代码4.2编译4.3运行 一、参数模型 在ROS Master中&#xff0c;存在一个参数服务器&#xff08;Parameter Server&#xff09;&#xff0c;它是一个全局…