Vue Element表单绑定（四）经常使用操做整理

1、启用回车提交报单操做

在登陆页面，使用回车提交表单操做通常是必要的一个操做。在 Element中如何使用呢，示例以下：

来个注意点：

1.button按钮的native-type设置为submit，而不是绑定click事件处理。

2.form表单增长submit.native.prevent提交事件绑定

代码以下：

<el-form
      :model="ruleForm2"
      :rules="rules2"
      ref="ruleForm2"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-container"
      @submit.native.prevent="handleSubmit2"
    >
      <h3 class="title">系统登陆</h3>
      <el-form-item prop="account">
        <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="帐号"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm2.checkPass"
          auto-complete="off"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" native-type="submit" :loading="logining">登陆</el-button>
        <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
      </el-form-item>
    </el-form>

handleSubmit2方法的验证代码操做本示例忽略。

 

 

更多：

Vue Element表单绑定（三）综合示例

Vue Element表单绑定（三）表单验证2

Vue Element表单绑定（二）表单验证1