Element-ui框架：避免el-form下的@keyup.enter.native回车时直接刷新页面问题

一、代码如下

　　queryParams表单中只有一个testColumn字段，以及搜索和重置表单按钮。

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="测试字段" prop="testColumn">
          <el-input v-model="queryParams.testColumn" placeholder="请输入测试字段" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
</el-form>

　　正常来说，将@keyup.enter.native绑定到搜索方法，应该在输入框内敲回车直接触发绑定的事件进行搜索，但实际效果却是整个页面被刷新。

二、问题处理

　　在表单中再添加一个字段后，这个功能就恢复正常了。

　　查询W3C的标准得知，form 表单中只有一个输入框时，它的默认逻辑是在输入框中按下回车会触发表单提交操作。

　　此时，要么扩展表单字段，要么就限制表单的默认提交。

　　添加@submit.native.prevent到form表单即可实现该效果。

　　如下：

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
        ······
</el-form>