使用vue+iview Form组件, 按enter键导致页面刷新的解决方案

场景：

在表单中的输入框输入内容后，按下 enter 键，预期结果是触发搜索功能，但是实际上按 enter 键后，整个页面都会刷新。

问题分析：

在只有一个表单的情况下，如果只有一个文本框时，按下回车将会触发表单的提交事件。

解决办法：

在 form 标签中添加 @submit.native.prevent

@submit.native.prevent 表示阻止表单默认提交

.native 表示对一个组件绑定系统原生事件

.prevent 表示提交以后不刷新页面

@keyup.native.enter 回车操作，添加在input标签上

<Form  :model="newForm"  inline :label-width="80" @submit.native.prevent>
    <FormItem label="名称" :label-width="120">
        <Input v-model="newForm.name"  @keyup.enter.native="search"></Input>
    </FormItem>
</Form>