使用element-ui表单，点击回车查询时，页面重新刷新加载的问题

关于使用element-ui表单，点击回车查询时，页面重新刷新加载的问题

代码：

        <el-form :model="queryParams" ref="queryForm" label-width="68px">
          <el-form-item label="展示名称" prop="showName">
            <el-input
              v-model="queryParams.showName"
              placeholder="请输入展示名称"
              clearable
              size="mini"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form>

原因：
当表单中只有一个输入框的时候，按下回车键会触发表单提交事件，从而导致页面刷新

解决方案：
在el-form标签上写入@submit.native.prevent

@submit.native.prevent
.native 表示对一个组件绑定系统原生事件
.prevent 表示提交以后不刷新页面

        <el-form :model="queryParams" ref="queryForm" label-width="68px" @submit.native.prevent>
          <el-form-item label="展示名称" prop="showName">
            <el-input
              v-model="queryParams.showName"
              placeholder="请输入展示名称"
              clearable
              size="mini"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form>

补充：
解决这个问题的时候，在网上看到了另一种思路。触发表单提交是当只有一个子表单时才会触发，那么在el-form中写入两个子表单就不会触发了，并且根据业务需求隐藏掉其中一个子表单。

        <el-form :model="queryParams" ref="queryForm" label-width="68px">
          <el-form-item label="展示名称" prop="showName"></el-form-item>
          <!-- 添加style="display:none"属性，隐藏节点元素 -->
          <el-form-item label="表单2" prop="item" style="display:none"></el-form-item>
        </el-form>

欢迎继续补充…

---

准备养成写博客的习惯，有其他解决办法或者思路的同学欢迎留言探讨，不足的地方欢迎指正