element+Vue el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面
vue的写法就是el-form上添加阻止默认事件 @submit.native.prevent
1 2 3 4 5 6 7 8 9 10 | <el-form ref= "queryForm" label-width= "120px" :model= "form" :rules= "rules" :show-message= "false" size= "mini" @submit.native.prevent > </el-form> |
项目中使用的是jsx的语法,修改为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | return ( <el-form {...{ class : "" , // ofxh on: { input: noop, }, nativeOn:{ //监听事件 submit: handlePrevent //阻止事件 }, props: { model: this .formData, rules: rules, inline: this .inline, disabled: this .disabled, "label-position" : this .labelPosition, "label-width" : this .labelWidth, "label-suffix" : this .labelSuffix, "validate-on-rule-change" : false }, ref: "form" , key: "form" }} > {formItemList} { this .$slots.inline} </el-form> ); 阻止事件 const handlePrevent= function (event){event.preventDefault()}; |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)