Element input 输入框回车刷新页面

乾坤鸟

已于 2022-08-15 11:20:52 修改

阅读量369

点赞数

分类专栏： ElementUI Vue 文章标签： vue.js javascript html

于 2022-08-01 10:19:30 首次发布

本文链接：https://blog.csdn.net/y393016244/article/details/126095683

版权

Vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

ElementUI

2 篇文章 0 订阅

订阅专栏

在前端开发中，遇到一个常见的问题：在使用Element UI的el-form组件时，按下回车键会导致页面刷新。为了解决这个问题，可以在el-form标签上添加@submit.native.prevent属性，这样可以阻止表单的默认提交行为。示例代码中展示了如何结合el-input和el-button，通过@keyup.enter及@click事件来实现回车搜索功能，避免了页面刷新。

摘要由CSDN通过智能技术生成

问题：文本框回车刷新页面

在 el-form 标签中添加【@submit.native.prevent】属性方式输入框回车时刷新页面问题。

<el-form @submit.native.prevent>
  <el-form-item>
    <el-input
      v-model="addressKeyword"
      placeholder="请输入关键字 (如: XX小区)"
      @keyup.enter="addressSearch"
      clearable
    >
      <template #append>
        <el-button type="primary" @click="addressSearch">查询</el-button>
      </template>
    </el-input>
  </el-form-item>
</el-form>