elementUI 输入框按回车刷新页面分析与解决

今天在测试页面功能的时候，突然发现在输入框内按enter页面被刷新，并且我的vue代码中并没有绑定@keyup.enter.native的操作。于是我决定对这个前端问题进行分析与解决；

分析：首先看一下我的前端代码，很简单只有一个el-input输入框。

 恰恰就是因为只有这一个输入框，导致了回车刷新页面，这是el-form的特性；

原因：当 el-form 表单内只有一个 el-input 输入框时，在输入框内按回车就会触发表单的提交事件，而当 el-form 表单内有多个 el-input 输入框时，按回车不会执行任何操作。

解决：如可以使用 @submit.native.prevent来阻止表单提交，把该注解添加到el-form标签上。

 .native 表示对一个组件绑定系统原生事件

.prevent 表示阻止默认事件（如form的submit事件默认提交会刷新页面，.prevent修饰符可以阻止该默认事件）