版權聲明：本文首發 http://asing1elife.com ，轉載請注明出處。 https://blog.csdn.net/asing1elife/article/details/82711366

elementui el-form 支援回車送出

el-form 元件預設不支援回車送出，需要對送出按鈕進行一下更改

更多精彩

• 更多技術部落格，請移步 asing1elife’s blog

實作方式

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>