首页 > 其他分享 >el-input出发回车事件时会导致页面刷新

el-input出发回车事件时会导致页面刷新

时间:2023-08-31 09:33:53浏览次数:42  
标签:el 文本框 表单 input 回车 页面

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

1:el-input上使用回车事件

 <el-input  v-model="input" @keyup.enter.native="search1">

解决方法一:在el-form表单加上@submit.native.prevent

<el-form @submit.native.prevent>
<el-input v-model="input" @keyup.enter.native="search1">
</el-form>

 


解决方法二:加一个隐藏的文本框,即表单不只有一个文本框

<el-form >
<el-form-item >
<el-input v-model="input" @keyup.enter.native="search1">
</el-form-item>
<el-form-item style="margin-bottom:0;display:none;">
<el-input></el-input>
</el-form-item>

</el-form >

 

标签:el,文本框,表单,input,回车,页面
From: https://www.cnblogs.com/qiangyanhuanxiao/p/17668748.html

相关文章

  • C# 中的锁对象SpinLock,Mutex,ReaderWriteLockSlim,SemaphoreSlim
    在C#中,有多种锁类型可用于控制并发访问和保护共享资源。以下是其中一些锁类型及其简要介绍:SpinLock:SpinLock是一种自旋锁,它在使用时会忙等待直到获取到锁为止,因此适用于低延迟应用程序。由于自旋操作可能会消耗CPU资源,因此SpinLock最适合在短时间内进行锁定和释放。M......
  • Jellyfin Documentation
    Skiptomaincontent  IntroductionOnthispageWelcometotheJellyfinDocumentationJellyfinisaFreeSoftwareMediaSystemthatputsyouincontrolofmanagingandstreamingyourmedia.Itisanalternativetothepropriet......
  • 【五期邹昱夫】CCF-A(TIFS'23)SAFELearning: Secure Aggregation in Federated Learning
    "Zhang,Zhuosheng,etal."SAFELearning:SecureAggregationinFederatedLearningwithBackdoorDetectability."IEEETransactionsonInformationForensicsandSecurity(2023)."  本文提出了一种在联邦学习场景下可以保护隐私并防御后门攻击的聚合方法。作者认......
  • MySQL 使用Navicat delete/insert into/update 大量数据表锁死,kill的线程后线程处于ki
      MySQL使用delete/insertinto/update大量数据表锁死,kill的线程后线程处于killed状态问题解决实际生产环境问题描述:使用Navicat备份BigData数据表时不小心点到了取消按钮,导致数据表被锁。  查看MySQL线程队列,找到刚刚执行的SQL看是属于什么状态。showprocessli......
  • Install elasticsearch-head: – for Elasticsearch 5.x
    RunningasapluginofElasticsearchInstallelasticsearch-head:–forElasticsearch5.x:sitepluginsarenotsupported.Runelasticsearch-head asastandaloneserverRunningwithbuiltinserverenable cors byadding http.cors.enabled:true inelasticsearc......
  • shell数组
    数组概述1数组中可以存放多个值。BashShell只支持一维数组(不支持多维数组),初始化时不需要定义数组大小(与PHP类似)。2与大部分编程语言类似,数组元素的下标由0开始。3Shell数组用括号来表示,元素用”空格”符号分割开,语法格式如下:4my_array=(value1value2…value......
  • el-table树形数据 + jsPlumb , 批量映射字段
    <template><el-dialogtitle="映射"append-to-body:visible.sync="mappingShow":close-on-click-modal="false":before-close="closeFileMappingDialog"width="1000px"><el-c......
  • excel导出功能
    packagecom.infosec.ztpdp.policycenter.module.audit.controller;importjava.io.IOException;importjava.io.OutputStream;importjava.net.URLDecoder;importjava.text.SimpleDateFormat;importjava.util.HashMap;importjava.util.List;importjava.util.Map;......
  • node18 vue2启动报错 error:0308010C:digital envelope routines::unsupported
    出现原因貌似是因为是因为node17版本开始发布的OpenSSL3.0,而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响。解决方法第一种方法降低node版本降低到17以下即可,如项目不能降低版本看后面的解决方式第二种方法设置NODE_OPTIONS环境变量......
  • python selenium报错ValueError: Timeout value connect was <...>, but it must be an
    最近学习爬虫,安装selenium,很简单地执行代码,但是一直报错。importtimeimportopenpyxlfromseleniumimportwebdriverfromselenium.webdriver.common.keysimportKeysfromselenium.webdriver.common.byimportByfromselenium.webdriver.chrome.serviceimportService......