elementui el-form 支持回车提交

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82711366 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82711366

elementui el-form 支持回车提交

el-form 组件默认不支持回车提交,需要对提交按钮进行一下更改

更多精彩

实现方式

  1. 在表单的提交按钮上添加 Vue 原生属性 native-type="submit" 可以让按钮变为表单提交按钮
  2. 当表单中只有一个输入框时,按钮会默认为提交按钮
  3. 设置默认的提交按钮后需要阻止表单默认提交事件,在表单上添加 @submit.native.prevent 即可
<el-form ref="form" :model="user" :rules="rules" class="login-form" @submit.native.prevent>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-form-item prop="username">
        <el-input v-model="user.username" placeholder="请输入用户名" autofocus>
          <in-icon slot="prefix" :name="userIcon"></in-icon>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="user.password" type="password" placeholder="请输入密码">
          <in-icon slot="prefix" :name="passwordIcon"></in-icon>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" class="submit-btn" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
目录
相关文章
vue 将Checkbox 多选框选中的值提交到后台
vue 将Checkbox 多选框选中的值提交到后台
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
1988 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
|
21天前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
48 1
|
21天前
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
14 0
|
2月前
|
前端开发
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决
80 0
elementui中el-checkbox 选中时的详细介绍
elementui中el-checkbox 选中时的详细介绍
|
8月前
|
JavaScript
vue 怎么将Checkbox 多选框选中的值提交
vue 怎么将Checkbox 多选框选中的值提交
47 0
|
9月前
|
JavaScript API
Vue + ElementUI el-input无法输入、修改、删除的问题
# 1、业务背景 查询资料此问题出现的原因是:vue页面进行数据渲染时,层次嵌套或者多重数据绑定导致该组件信息框数据不能被Vue实时监听到,以此出现了数据发生改变但页面上更新或删除对应信息框的数据毫无反应的现象,此时需要强制更新,重新渲染。 # 2、代码示例 ## 1)核心代码 ```html <el-input type="textarea" clearable placeholder="请输入测试文本:" v-model="form.Message" @input="changeMessage($event)"> </el-input> ``` 方法: ```j
192 0
elementUI 的el-select组件编辑时点击没反应效果demo(整理)
elementUI 的el-select组件编辑时点击没反应效果demo(整理)
|
11月前
不使用el-form仅仅单独给el-input设置表单校验
不使用el-form仅仅单独给el-input设置表单校验
298 0