首页 > 其他分享 >针对form 表单 只有一个输入框的时候 使用回车查询会刷新页面问题

针对form 表单 只有一个输入框的时候 使用回车查询会刷新页面问题

时间:2023-04-12 18:48:10浏览次数:50  
标签:prevent form submit 表单 输入框 handleQuery 回车 native

  <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>         <el-form-item label="表单名" prop="name">           <el-input v-model="queryParams.name" placeholder="" clearable @keyup.enter.native="handleQuery"  />         </el-form-item>         <el-form-item>             <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>             <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>       </el-form-item>     </el-form> 解决方案:   解决方案1.可以在el-form 中添加 @submit.native.prevent  字段 进行防止在使用@keyup.enter.native="handleQuery" 的时候回车刷新了页面的问题     解决方案2: 还以复制一份<el-form-item>  标签,然后给不需要的<el-form-item>  标签进行添加v-show="false" ,此时不需要在el-form 中添加 @submit.native.prevent  字段  

标签:prevent,form,submit,表单,输入框,handleQuery,回车,native
From: https://www.cnblogs.com/rockyjs/p/17310793.html

相关文章

  • antd 表单里加tooltip不生效问题
    antd的form表单的label后面加一个问号icon,hover展示提示,但是加进去之后,hover不提示,最后发现原因是因为labelCol,不清楚为啥,反正去掉就能提示,加上就不提示,所以最后把这个labelCol去掉了,自己在CSS里写的样式 修改antdform表单自己的样式,需要在global.less文件里写  ......
  • 现代计算机图形学——P3. Transformation-2D
    P3.TransformationP3.Transformation 矩阵和变换联系起来 ReflectionMatrix(反射矩阵(名字不重要)):切变:旋转:推导:旋转矩阵中的B和D可以用(0,1)这个点来推算线性变换:(先不管这个M)齐次坐标为什么要用齐次坐标:......
  • element使用组件el-form自动定位到未填写的必填条目
    问题:在form表单el-form中经常会出现表单条目比较多的问题,而且在提交的时候需要校验表单并且定位到相应的条目位置。解决:html:<el-formref="form":model="form":rules="rules"label-width="140px"><el-form-itemlabel="规则名称"prop="ruleName&qu......
  • mysql——date_format(),str_to_date()函数
    date_format():类似python中的strftime: 将给定格式的日期时间对象转换为字符串。日期时间对象=>字符串,控制输出格式selectdate_format(datetime的字段,‘%Y-%m-%d’)括号中前面是你要格式化的字段,后面是具体要格式化成什么样式。 str_to_date():类似python中的strptime:将字......
  • UVa 408 Uniform Generator (最大公约数&证明)
    408-UniformGeneratorTimelimit:3.000secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=100&page=show_problem&problem=349Computersimulationsoftenrequirerandomnumbers.Onewaytogeneratepseudo-r......
  • platformio+esp32 编译时下载PACKAGES错误 Tool Manager ERROR
    如图,readtimeoutToolManegerl:Lookingforanothermirror.....  编译时一共需要三个[email protected](2.04)[email protected](3.0.0)[email protected]+2021r2-patch3都存在下载时超时,一直找寻......
  • CVPR 2023|两行代码高效缓解视觉Transformer过拟合,美图&国科大联合提出正则化方法DropK
    前言 美图影像研究院(MTLab)与中国科学院大学突破性地提出正则化方法DropKey,用于缓解VisionTransformer中的过拟合问题。该方法通过在注意力计算阶段随机drop部分Key以鼓励网络捕获目标对象的全局信息,从而避免了由过于聚焦局部信息所引发的模型偏置问题,继而提升了基于Tra......
  • HTML form input shadow-root All In One
    HTMLforminputshadow-rootAllInOne禁用DOM编辑MutationObserverAPIshadow-root无法编辑DOM???forminput#shadow-root(user-agent)<divclass="write_public_box4write_public_samebox"><divclass="f_l"><p>......
  • spring security FormLoginConfigure的作用和源码解读
    这一节来研究下springsecurity中FormLoginConfigurer这个配置器的作用一、综述FormLoginConfigurer本质上还是一个SecurityConfigurer,用来对HttpSecurity这个构建器进行配置,它用来对表单登录的功能进行配置,通过HttpSecurity#formLogin()方法来给HttpSecurity对象中添加此配......
  • ViT-Adapter:用于密集预测任务的视觉 Transformer Adapter
    前言 这篇文章提出了一种用于使得ViT架构适配下游密集预测任务的Adapter。简单的ViT模型,加上这种Adapter之后,下游密集预测任务的性能变强不少。本文给出的ViT-Adapter-L在COCO数据集上达到了60.9的boxAP和59.3的maskAP。本文转载自极市平台作者|CV开发者......