关于el-form按回车自动刷新页面的问题及解决方案

一、问题背景

　　在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。

1、问题描述及触发条件：

　　当 el-form 中 有且只存在一个input时，在这个input中回车会触发默认提交事件，可能会改变网址，导致在地址中的参数发生改变造成报错。

　　另：注意是只存在有一个input时，才会触发，其中el-date，el-select底层都是input，存在el-input和el-select、el-date时不会触发，存在el-input、el-checkbox-button时则会触发。

2、原因分析：

　　Element表单本身存在的一个Bug，原生form表单的默认事件就是回车提交，现在原生form表单不怎么用了。

　　原生form中回车弹起就会发生页面跳转来提交表单内容，这也是这个Bug发生的原因，这个默认事件没有去干净。

二、解决方案

1、直接去除掉 form 表单，改用别的输入形式，当然这是最简单粗暴的方法

2、如果一个input会自动提交，那么比较容易想到的是再加一个input

　　值得注意的是：这里的input不能设置type为hidden，这样也是不生效的，form一样会认为只有一个input。需要设置成 <input type="text" class="form-control" style="display:none">

3、给input加上回车事件直接return false。在input加上οnkeydοwn="if(event.keyCode==13){return false;}

4、直接阻止form表单的提交，在form表单加入οnsubmit="return false;"。

5、在el-form中添加 @submit.native.prevent 阻止表单默认提交事件

// Vue2 + element UI 禁用表单提交
// 在<from> 中添加@submit.native.prevent
<el-form @submit.native.prevent></el-form>

// Vue3 + element Plus 禁用表单提交
// 在<from>中添加@submit.enter.prevent  
<el-form @submit.enter.prevent></el-form>