使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。

摘要:
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面:原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件,从而导致页面刷新。

使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面

原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新。

1 <el-form :inline="true" :model="getForm" class="demo-form-inline">
2    <el-form-item label="科目名称">
3       <el-input v-model.trim="getForm.exam_name" @keyup.enter.native="search"></el-input> 
4   </el-form-item>
5 </el-form>

解决方案:在 el-from 加上 @submit.native.prevent

1 <el-form :inline="true" :model="getForm"   @submit.native.prevent>
2    <el-form-item label="科目名称">
3        <el-input v-model.trim="getForm.exam_name" @keyup.enter.native="search"></el-input> 
4   </el-form-item>
5</el-form>

免责声明:文章转载自《使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇华为ensp启动路由时出现40错误Linux设置串口波特率等参数下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

HR一个奖金模拟试算的程序,仅供参考

************************************************************************* Copyright 2004 Wuhan ** All Rights Reserved **-----------------------------------------------------------...

bootstrap基础(二)

表单 一、基础表单 表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 二、水平表单 在<form>元素上使用类名“form-horizontal” <form class="form-horizontal" role="form"> <div class="form-group">...

vue后台(一)

一,项目准备工作 1.拿到已经是二次开发的代码, npm i , 安装依赖包 ES6模块暴露和导入复习 1. 导出方式一: 默认一次性导出 (只能有一个) export default xxx 本质: 整个模块是一个对象, 对象中有default属性, 即: {default: xxx} 2....

excel数据批量导入

1.  html           <form action="@Url.Action("UpLoadFile")" enctype="multipart/form-data" method="post">                                  <td>                         ...

Flutter form 的表单 input

点击空白 input 失去焦点, 在页面的Scaffold外层加 GestureDetector(behavior: HitTestBehavior.translucent,onTap: () {FocusScope.of(context).requestFocus(FocusNode());},child:); 一、Flutter 常用表单介绍 Fl...

jquery表单插件 jquery.form(异步提交)(学习总结)

不通过jquery.form实现异步提交 通过一个iframe 将form 的target定位到iframe中的name <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional...