使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新

问题描述:
 使用 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 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 标签上添加 @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
      },
      [])

希望能够帮助到大家

你可能感兴趣的:(使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新)