vue3+ts+element-plus 表单el-form取消回车默认提交
问题描述：在表单el-form中的el-input中按回车后，页面会刷新，url也会改变，
回车前：
回车后：
相关代码：
解决方法1：在 el-form 上阻止默认的 submit 事件，增加 @submit.prevent，在 el-form 上监听 submit 事件，并调用 event.preventDefault() 来阻止默认的提交行为。
解决方法2：在 el-form 上阻止默认的 submit 事件，增加 @submit.native.prevent，在 el-form 上监听 submit.native 事件，并调用 event.preventDefault() 来阻止默认的提交行为。
解决方法3：在 el-form 上阻止 keydown 回车事件，增加 @keydown.enter.prevent，在 el-form 上监听 keydown.enter 事件，并调用 event.preventDefault()来阻止默认的回车行为。
解决方法4：在 指定的 el-input 组件上阻止 keydown 回车事件，增加 @keydown.enter.prevent，在 el-input 上监听 keydown.enter 事件，并调用 event.preventDefault()来阻止默认的回车行为。
扩展：
经过上述调整后，在el-input中按回车后不会默认提交表单了，但还需要实现在el-input中按回车后进行查找（相当于点击后面的查找按钮）
修改后的代码：
<!-- 使用 @keydown.enter.prevent 或 @submit.prevent 或 @submit.native.prevent 取消回车默认提交 -->
<el-form inline style="height: 32px;" @keydown.enter.prevent>
<el-form-item>
<!-- 使用 @keydown.enter="onSearchClick" 按回车进行查找 -->
<!-- 使用 @keydown.a.enter.b="onSearchClick" 按a键、回车键、b键都可以进行查找，注意：= 左边的内容不能使用大写字母 -->
<el-input v-model="name" placeholder="请输入查找内容" clearable @keydown.enter="onSearchClick">
<template #append>
<el-button :icon="Search" @click="onSearchClick" />
</template>
</el-input>
</el-form-item>
</el-form>@keydown.enter="onSearchClick"
@keydown.a.enter.b.c.d……="onSearchClick" 按a键、回车键、b键、c键、d键都可以进行查找，注意：= 左边的内容不能使用大写字母
到此这篇关于vue3+ts+element-plus 表单el-form取消回车默认提交的文章就介绍到这了,更多相关vue3+ts+element-plus 表单el-form取消回车内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了vue自动检测手机端响应式布局,可以通过结合 CSS 媒体查询、Vue 的动态数据绑定、适当的第三方库、PostCSS 插件以及正确的视口设置实现,感兴趣的可以了解一下2024-07-07
实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commit很多次的时候，{commit} 写法是解构后得到的，这篇文章主要介绍了Vuex Action的{ commit }的写法,需要的朋友可以参考下2023-10-10
本文主要探讨了网页刷新时,原本隐藏的元素会一闪而过的问题,以及尝试过的解决方案并未奏效,通过实例代码介绍了如何处理 Vue3 中隐藏元素刷新闪烁问题,感兴趣的朋友跟随小编一起看看吧2024-10-10
vue鼠标hover(悬停)改变background-color移入变色问题
这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
解决vue更新路由router-view复用组件内容不刷新的问题
今天小编就为大家分享一篇解决vue更新路由router-view复用组件内容不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了轻松实现一个简单的vue公式编辑器组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
对于插槽的概念和使用,这是vue的一个难点,这需要我们静下心来,慢慢研究,下面这篇文章主要给大家介绍了关于vue默认插槽的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要为大家介绍了VUE的数据代理与事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助2021-11-11
这篇文章主要为大家详细介绍了vue2.0实现列表数据增加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
下面小编就为大家分享一篇Vue父组件调用子组件事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论