element input回车刷新页面问题解决

element input回车刷新页面问题解决

WEB开发中，如果页面的 form 表单中只有一个input，那么在按下回车后，浏览器会默认表单提交，从而触发页面刷新。

如下代码，我本来想按下回车触发handleFilter函数，但是页面却刷新了…

<el-form ref="form" :model="form" label-width="150px">
  <el-row>
    <el-col :span="8">
      <el-form-item
        label="姓名"
      >
        <el-input v-model.trim="form.name" style="width:100%" @keyup.enter.native="handleFilter" />
      </el-form-item>
    </el-col>

    <el-col :span="8" :offset="8" style="text-align:right">
      <el-form-item>
        <el-button v-waves class="filter-item" type="primary" @click="handleFilter">确定</el-button>
        <el-button v-waves class="filter-item" type="default" @click="handleFilterReset">取消</el-button>
      </el-form-item>
    </el-col>

  </el-row>
</el-form>

解决方法如下，只要在form表单加上 @submit.native.prevent 就可以阻止页面刷新，如下

<el-form ref="form" :model="form" label-width="150px" @submit.native.prevent>
  <el-row>
    <el-col :span="8">
      <el-form-item
        label="姓名"
      >
        <el-input v-model.trim="form.name" style="width:100%" @keyup.enter.native="handleFilter" />
      </el-form-item>
    </el-col>

    <el-col :span="8" :offset="8" style="text-align:right">
      <el-form-item>
        <el-button v-waves class="filter-item" type="primary" @click="handleFilter">确定</el-button>
        <el-button v-waves class="filter-item" type="default" @click="handleFilterReset">取消</el-button>
      </el-form-item>
    </el-col>

  </el-row>
</el-form>

这样就阻止了页面的刷新，从而实现我们需要的效果。
只有在form表单内只存在一个input时才会出现这个情况，有两个input就不会触发刷新了！各位小伙伴可以注意一下。