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.js中的ElementUI组件库实现el-menu与el-tabs的联动,通过在el-menu中选择菜单项,可以切换el-tabs的内容区域,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
这篇文章主要为大家详细介绍了vue-video-player视频播放器的使用和配置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了vue项目打包部署后默认路由不正确的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vite是一款非常轻量级的Web开发框架，它可以帮助开发者快速搭建一个开发环境。Vite搭建的开发环境可以提供更快的编译速度，更少的配置，更好的性能和更多的开发者友好性，使开发者可以更快地构建出功能强大的Web应用程序。2023-02-02
这篇文章主要介绍了vue.js系列中的vue-fontawesome使用,需要的朋友可以参考下2018-02-02
在 Vue.js 中,组件的重复渲染是一个常见的问题,可能会影响应用的性能和用户体验,为了提升应用的性能,开发者需要理解 Vue 的渲染机制,并应用有效的方法来避免不必要的组件重渲染,本文将深入探讨如何防止 Vue 组件重复渲染,并提供相关示例代码,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue中使用Tinymce的示例,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue-cli3项目引入Typescript的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家详细介绍了Vue.js结合bootstrap 前端实现分页和排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法，对函数式写法，options 写法相关知识感兴趣的朋友一起看看吧2021-11-11
最新评论