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