iview Form Input组件按下回车键搜索和禁止触发表单默认事件

在进行表单搜索功能开发的过程中,经常会有这样的需求,要求Input输入完成以后,按下回车键进行查询。实现这个功能只需要在Input组件上增加@keyup.enter事件即可

代码如下:

javascript 复制代码
<Input v-model="searchWords" @keyup.enter="gotoSearch" placeholder="Search By: Disease name, Food name, Comopound name, Dietary Pattern, or other factors..." />

在使用iview Form 表单开发的过程中,会遇到另一种问题,在Input输入完内容后按下回车自动刷新了页面,这是触发了表单的默认提交事件,这种情况该怎么处理呢?只需要在Form组件上加上@submit.native.prevent

代码如下:

javascript 复制代码
<Form ref="formDynamicRef" :model="formDynamic"  @submit.native.prevent>
</Form>
相关推荐
lyz2468598 天前
动态报表筛选多项时的优化处理
javascript·uni-app·view design
顽强d石头1 个月前
viewDesign里的table内嵌套select动态添加表格行绑定内容丢失
数据库·mysql·view design
lyz2468591 个月前
iview表单提交验证时,出现空值参数被过滤掉不提交的问题解决
view design
学了就忘1 个月前
iView Table 组件跨页选择功能实现文档
view design
zzlyx993 个月前
设备管理系统功能与.NET+VUE(IVIEW)技术实现
前端·vue.js·view design
lyz2468593 个月前
iview table组件中修改按钮时 要注意是否真的修改了值
view design
花伤情犹在4 个月前
uView UI 在 UniApp 中的集成与配置
uni-app·view design
小茗同学阿5 个月前
如何实现分片上传功能:基于 Vue 和 iView 上传组件的详细教程
前端·vue.js·view design
初遇你时动了情6 个月前
解决uview ui赋值后表单无法通过验证
view design
Э时间行者于我6 个月前
iview upload clearFiles清除回显视图
前端·view design