elementui的el-input按回车键后执行方法

最新推荐文章于 2024-08-28 17:21:02 发布

想吃变态辣条

最新推荐文章于 2024-08-28 17:21:02 发布

阅读量1.5w

点赞数 10

分类专栏：前端笔记 vue 文章标签： elementui 前端 vue javascript

本文链接：https://blog.csdn.net/Vanilla1119/article/details/90692746

版权

前端笔记同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

elementui的el-input按回车键后执行方法

当el-input标签放入el-form标签中时：
1.只有一个el-input标签
2.只有一个el-input标签和一个el-button标签

以上两种情况会触发form表单默认提交刷新事件

解决方法：

在el-form中增加 @submit.native.prevent

若想增加回车后触发事件：
el-input增加 @keyup.enter.native

<el-form :model="findPwdForm" ref="PwdForm"  @submit.native.prevent>
          <el-form-item
            prop="userName"
            label="用户名"
            :rules="[{required: true, message: '请输入用户名', trigger: 'blur'}]"
          >
            <el-input
              type="text"
              v-model="findPwdForm.userName"
              placeholder="请输入用户名"
              @keyup.enter.native="onNext"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onCancel()">取消</el-button>
            <el-button type="primary" @click="onNext">确定</el-button>
          </el-form-item>
 </el-form>