element-ui form 表单按回车后整个页面刷新

element-ui form 表单按回车后整个页面刷新

<el-form :model="form" ref="ruleFormRef" size="default" label-width="70px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
          <el-form-item label="关键字" prop="str">
            <el-input @keyup.enter="onSearch" v-model="form.str" placeholder="请输入关键字" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="13" :md="9" :lg="7" :xl="5" class="mb20" style="margin:0">
          <el-form-item>
            <el-button type="primary" native-type="submit" @click="onSearch" :icon="Search">
              搜索
            </el-button>
            <el-button type="danger" @click="resetForm(ruleFormRef)" :icon="Delete">
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

是由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。

解决办法：

1.在表单的提交按钮上添加 Vue 原生属性 native-type=“submit” 可以让按钮变为表单提交按钮
2.当表单中只有一个输入框时，按钮会默认为提交按钮
3.设置默认的提交按钮后需要阻止表单默认提交事件，在表单上添加 @submit.native.prevent 即可

由于VUe3.x废除.native 所以@submit.prevent 也可

    <el-form :model="form" ref="ruleFormRef" size="default" label-width="70px" @submit.prevent>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
          <el-form-item label="关键字" prop="str">
            <el-input @keyup.enter="onSearch" v-model="form.str" placeholder="请输入关键字" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="13" :md="9" :lg="7" :xl="5" class="mb20" style="margin:0">
          <el-form-item>
            <el-button type="primary" native-type="submit" @click="onSearch" :icon="Search">
              搜索
            </el-button>
            <el-button type="danger" @click="resetForm(ruleFormRef)" :icon="Delete">
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>