element提交表单第一次会刷新后续操作一切正常

最新推荐文章于 2025-07-29 16:00:55 发布

万猿丛中最秃的帅哥

最新推荐文章于 2025-07-29 16:00:55 发布

阅读量830

点赞数 3

CC 4.0 BY-SA版权

文章标签： element ui vue

本文链接：https://blog.csdn.net/qq_40787608/article/details/126578020

本文介绍如何解决ElementUI中使用native-type='submit'属性导致的页面首次提交刷新问题。通过给el-form添加@submit.native.prevent属性可以有效避免此现象。

element ui的el-button有一个native-type='submit'属性，是用于按下回车键提交表单的，但是在给el-button添加这个属性的时候会存在首次登录刷新页面的问题

      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" class="login_form" label-position="right">
        <el-form-item label="用户名" prop="name">
          <el-input prefix-icon="el-icon-user-solid" v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" prefix-icon="el-icon-lock" v-model="form.password" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" native-type="submit">登录</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

这样只给el-button添加native-type='submit'属性的时候，首次提交表单页面会刷新一次，但是后续操作一切正常，这时候我们给el-form标签添加一个属性就不会出现刷新情况了

      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" class="login_form" label-position="right" @submit.native.prevent>
        <el-form-item label="用户名" prop="name">
          <el-input prefix-icon="el-icon-user-solid" v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" prefix-icon="el-icon-lock" v-model="form.password" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" native-type="submit">登录</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>