Vue Element表单绑定（四）常用操作整理

曾经终败给现在 2022-10-02 02:56 279阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

**一、启用回车提交报单操作**

在登录页面，使用回车提交表单操作一般是必要的一个操作。在 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-form-item>
        </el-form>

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

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

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

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

转载于:https://my.oschina.net/tianma3798/blog/3040218

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/812dfe8c197446329d4fff0a40eb72dc.png
[Vue Element]: https://my.oschina.net/tianma3798/blog/3010631
[Vue Element_2]: https://my.oschina.net/tianma3798/blog/3010425
[Vue Element_1]: https://my.oschina.net/tianma3798/blog/3010171