原因:elementUI中的当el-form表单只存在一个el-input框时,会触发表单的默认提交事件,element也给出了解释
W3C 标准中有如下规定:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。
例:el-form内单el-input触发页面刷新
<el-form :model="form" ref="form" label-width="200px" class="form">
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('form')">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
解决方法:element也给出了解决方法
- 如果希望阻止这一默认行为,可以在
<el-form>
标签上添加@submit.native.prevent
<el-form
:model="form"
ref="form"
label-width="200px"
class="form"
@submit.native.prevent
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('form')">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
官方给出的只是阻止了这一默认行为。当需要回车来提交表单时可以通过下面这种操作来进行解决
<el-form
:model="form"
ref="form"
label-width="200px"
class="form"
@submit.native.prevent="() => submit('form')"
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
//注意事项
el-form 方式 确保使用 @submit.native.prevent 阻止原生事件,执行方法为搜索按钮按click事件
[确保方法调用不丢参数]
搜索按钮 - 确保被包裹在 el-form 中
搜索按钮 - 确保按钮的click事件去除掉
搜索按钮 - 确保增加 native-type="submit" 属性
那elementUI的解决了, 原生的form表单的单input和form包裹el-input回车刷新的问题也一样可以解决
1.在form表单内再增加一个隐藏的input框
①通过hidden定义隐藏的输入字段
<form>
<input type="hidden" value="1"></input>
</form>
②通过css样式进行隐藏
<form>
<input type="text" style="display:none"></input>
</form>
2.去掉输入框的回车事件(根据需求来定,有的需要回车事件提交表单来查询或者执行其他操作则该方法不适用)
<form>
<input type="text" onkeydown="ClearSubmit(e)"></input>
</form>
<script>
function ClearSubmit(e) {
if (e.keyCode == ) {
return false;
}
}
</script>
3.阻止表单默认提交事件(下面例子是以form表单包裹el-input,解决 el-form中el-input回车页面刷新的问题 原生form内的input可用onsubmit句柄返回false来解决)
<form @submit.prevent="() => getList()">
<el-input V-model="inputValue">
</el-input>
<el-button type="primary" native-type="submit"> {{"提交"}} </el-button>
<el-button @click="reset">{{ $t(重置') }}</el-button>
</form>