问题描述:
使用 elementUI 的表单进行查询，表单中只有一个文本框时，回车会自动触发表单的提交事件，导致页面的刷新
解决方法
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> 标签上添加 @submit.native.prevent。
本人碰到的问题是使用Vue中的render函数进行渲染el-form元素的。所以怎么阻止表单的这个默认行为呢？
解决方法
使用Vue提供的nativeOn属性进行监听submit方法。在方法中禁止form表单的默认行为；代码如下所示:
h(
'el-form',
{
props: {
model: vm.formValues,
rules: vm.rules,
...vm.$attrs
},
class: {
'form-wrapper-h': true
},
nativeOn: {
submit: (e) => {e.preventDefault()} // 解决当只有一个输入框时点击回车会刷新网页的bug
},
ref: REF
},
[])
希望能够帮助到大家
