在表单输入框按回车页面刷新的问题
问题描述
页面上有一个查询功能，查询条件只有名称查询，为了方便后期扩展，查询项用表单写的。当打开后台后第一次在该页面输入框输入内容按回车，页面刷新。正确响应应该是无反应。
原因
这个问题是由于W3C标准行为导致的：当form元素中只有一个输入框时，在该输入框中按下回车会自动提交表单，表单提交会导致页面刷新，而非执行预期的无反应状态。
解决方案
1.在form标签上添加阻止默认提交的修饰符（推荐）。
<el-form @submit.native.prevent>
<el-input v-model="inputValue"></el-input>
</el-form>
.prevent修饰符会调用event.preventDefault()阻止默认提交行为。
.native修饰符用于监听组件根元素的原生事件。我使用了Element-UI组件，所以使用.native修饰符监听原生事件。如果用的原生form标签，就用 @submit.prevent 就行了。
2.如果不考虑后期增加查询项的问题，可以移除form标签，不用表单功能。
3.添加隐藏的输入框，通过使表单不只有一个输入框来规避标准行为。
<el-input style="display:none"></el-input>