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

互联网 12 月前 0 6

本文介绍: Elem ent plus中el–input 框回车触发页面刷新问题及解决方案

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

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

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

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

在这里插入图片描述

解决方案：

在el-form里加上@submit.prevent ，
in put输入框里可以使用@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>