el-form里只有一个el-input回车刷新页面问题

最新推荐文章于 2024-04-29 08:52:32 发布

```随风而行```

最新推荐文章于 2024-04-29 08:52:32 发布

阅读量415

点赞数 1

文章标签： vue elementui js

本文链接：https://blog.csdn.net/calm007s/article/details/129553989

版权

使用情况

form 表单中只有一个输入框，在输入框中按下回车就是提交该表单，且会刷新页面。阻止这一默认行为，可以在标签上添加 @submit.native.prevent。
搜索条件只有一个输入框时,如果使用了@keyup.enter.native=“事件” 原始键盘回车事件来触发搜索操作,会对整个页面都进行刷新,想让页面不刷新,可使用 @submit.native.prevent 阻止原始提交事件

@submit.native.prevent
.native 表示对一个组件绑定系统原生事件
.prevent 表示提交以后不刷新页面

代码

修改前代码

<el-form
   class="btn-box"
>
  <el-input
     v-model.number="searchNum"
     clearable
     oninput="value=value.replace(/[^\d]/g,'')"
     placeholder="请输入立交序号"
     @clear="claerSearch"
     @keyup.enter.native="searchGsc"
   />
    <el-button
       type="primary"
       class="search-btn"
       @click="searchGsc"
     >
        搜索
     </el-button>
</el-form>

修改后代码

<el-form
   class="btn-box"
   @submit.native.prevent // 阻止from表单默认事件
>
  <el-input
     v-model.number="searchNum"
     clearable
     oninput="value=value.replace(/[^\d]/g,'')"
     placeholder="请输入立交序号"
     @clear="claerSearch"
     @keyup.enter.native="searchGsc"
   />
   <el-button
      type="primary"
      class="search-btn"
      @click="searchGsc"
    >
      搜索
   </el-button>
</el-form>