Element: [Bug Report]When you have only one el-input in el-form, press enter on input will submit the form

[freefcw]

Element UI version

1.3.7

OS/Browsers version

macOs 10.12 / Chrome 59

Vue version

2.3.4

Reproduction Link

https://jsfiddle.net/yk8hxu8d/1/

Steps to reproduce

https://jsfiddle.net/yk8hxu8d/1/

在上面链接中，el-form中只有一个el-input，在el-input中按回车，会提交表单并刷新页面

https://jsfiddle.net/yk8hxu8d/

在上面链接中，el-form中有两个el-input，在任意一个中按回车，都不会导致表单被提交

What is Expected?

不管el-form中有多少个el-input，回车事件都不应该导致表单被提交而刷新页面

What is actually happening?

el-form中只有一个el-input的时候，回车事件导致表单被提交而刷新页面

[element-bot]

Translation of this issue:

Element UI version

1.3.7

OS/Browsers version

MacOs 10.12 / Chrome 59

Vue version

2.3.4

Reproduction Link

https://jsfiddle.net/yk8hxu8d/1/

Steps to reproduce

Https://jsfiddle.net/yk8hxu8d/1/

In the link above, there is only one el-form in el-input, and press enter in el-input to submit the form and refresh the page
Https://jsfiddle.net/yk8hxu8d/

In the link above, there are two el-form in el-input, and press enter in any of them will not cause the form to be submitted

What is Expected?

No matter how many el-input in el-form, the carriage return should not cause the form to be submitted and refresh the page

What is actually happening?

When there is only one el-form in el-input, the carriage return causes the form to be submitted and refreshes the page

[Leopoldthecoder]

这是浏览器的默认行为，与 Element 和 Vue 都无关：
只有一个 input：https://jsfiddle.net/rswut6kk/
有两个 input：https://jsfiddle.net/rswut6kk/1/

可以在 <el-form> 上添加 @submit.native.prevent，阻止这一默认行为：https://jsfiddle.net/yk8hxu8d/2/

[freefcw]

@Leopoldthecoder 即便是浏览器的默认行为，我觉得作为one page应用，不应该有如此差异的行为。如果说要保持一致，还是在文档上应该标明一旦较好。

[Leopoldthecoder]

会的。

[chenqiuxia]

我也遇到了同样的问题，只有一个input的时候浏览器会自动提交form，解决办法就是：在input外面的form上加上

@submit.native.prevent

来阻止浏览器的默认行为，在el-input上也要添加

 @keyup.enter.native="action"

就好了