Vue enter回车导致页面刷新问题及解决

问题：vue按下enter默认刷新页面，原因是form表单里按下键盘会默认提交表单，而刷新页面。

解决：

1. form 表单中只有一个输入框，在输入框中按下回车就是提交该表单，且会刷新页面。阻止这一默认行为，可以 在 标签上添加 @submit.native.prevent。
2. 搜索条件只有一个输入框是,如果使用了@keyup.enter.native=“crud.toQuery” 原始键盘回车事件来触发搜索操作,会对整个页面都进行刷新,想让页面不刷新,可使用 @submit.native.prevent 原始提交事件

修改前代码：

<el-form ref="query" :model="query" label-width="80px">
  <el-row>
    <el-col :xs="24" :sm="24" :lg="6">
      <el-form-item label="标题名称">
        <el-input v-model="query.blurry" clearable style="width: 100%" />
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

修改后代码：

<el-form ref="query" :model="query" label-width="80px" @submit.native.prevent>
  <el-row>
    <el-col :xs="24" :sm="24" :lg="6">
      <el-form-item label="标题名称">
        <el-input v-model="query.blurry" clearable style="width: 100%" @keyup.enter.native="crud.toQuery" />
      </el-form-item>
    </el-col>
  </el-row>
</el-form>