Element plus中el-input 框回车触发页面刷新问题及解决方案

elementUi中input组件回车触发页面刷新问题及解决方案

技术：vue3+element plus的UI框架

今天做了一个小小的功能，就是基于elementUi框架的一个输入框，需要监听输入框的回车事件，然后调取接口。

代码如下：

<el-form :model="from":inline="true"><el-form-item label="身份证号"><el-input
          v-model="from.idCard"
          placeholder="请输入身份证"
          clearable
          prefix-icon="Search"
          maxlength="18"
          show-word-limit
          autofocus
          style="width: 260px"
          @change="selectIdCard"></el-input></el-form-item><el-form-item><el-button type="primary" @click="selectIdCard">确定</el-button></el-form-item></el-form>

在输入框回车后会刷新页面，查询的原因如下

解决方案：

在

el-form

里加上

@submit.prevent

，
input输入框里可以使用

@keyup.enter

监听回车事件

<el-form :model="from":inline="true" @submit.prevent><el-form-item label="身份证号"><el-input
          v-model="from.idCard"
          placeholder="请输入身份证"
          clearable
          prefix-icon="Search"
          maxlength="18"
          show-word-limit
          autofocus
          style="width: 260px"
          @keyup.enter="selectIdCard"></el-input></el-form-item><el-form-item><el-button type="primary" @click="selectIdCard">确定</el-button></el-form-item></el-form>

回车后截图如下