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

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>

回车后截图如下

转载请说明出处内容投诉
CSS教程_站长资源网 » Element plus中el-input 框回车触发页面刷新问题及解决方案

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买