开启掘金成长之旅！这是我参与「掘金日新计划 · 2更文挑战」的第4天 点击查看活动详情

前言

最近遇到一个项目，导航栏中的搜索框需要添加一个回车事件，但前提是旁边是已经有了一个搜索按钮，我就不是很想写这个会车事件，木得办法，为了适应某些人的回车习惯，只能添加了。

常见的回车事件

代码如下：

<el-input @keyup.enter.native="UserSelect" placeholder="请输入用户名称">

这是单独的放出来，这样的一个回车事件是没有任何问题的，但如果是在form表单中他是会失效的。

form表单中的回车事件

一般失效代码如下：

<el-form-item label="名称" prop="taskName">
  <el-input
    v-model="queryParams.taskName"
    placeholder="请输入名称"
    clearable
    size="small"
    @keyup.enter.native="handleQuery"
  />
</el-form-item>

<el-form-item>
  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  </el-form-item>

回车失效原因

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。

修改如下：

<el-form-item label="名称" prop="taskName" @submit.native.prevent>
  <el-input
    v-model="queryParams.taskName"
    placeholder="请输入名称"
    clearable
    size="small"
    @keyup.enter.native="handleQuery"
  />
</el-form-item>

<el-form-item>
  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  </el-form-item>