input输入框回车搜索会刷新整个项目

使用elementui表单输入框搜索，按下回车会刷新整个项目的问题

因为这里只有一个input

当form表单只有一个输入框时，按下回车会去提交表单（触发submit事件）
所以就刷新了整个页面

 回车事件：@keyup.enter.native="handleQuery"

 <el-form-item label="规则名称" prop="rule" style="width: 30%">
        <el-input
          v-model="queryParams.rule"
          placeholder="请输入规则名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

解决办法

1.给他多加了一个input然后隐藏；这样就不会提交表单了；

   <el-form-item label="规则名称" prop="rule" style="width: 30%">
        <el-input
          v-model="queryParams.rule"
          placeholder="请输入规则名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
         <input type="text" style="display:none" />
      </el-form-item>

效果就是这样了；这就解决了；

我们再来看下 一个表单不止一个input的时候；

就可以直接回车搜索了；

element文档中有说明这是w3c标准的规定；

2.可以通过加这个属性解决

@submit.native.prevent

记得别加错地方了；是加在el-form上哦~

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

也是可以解决的