el-input出发回车事件时会导致页面刷新

发布时间 2023-08-31 09:31:52作者: 孤独的洋葱头

原因分析:当表单只有一个文本框时,按下回车将会触发表单的提交事件, 导致页面的刷新。

1:el-input上使用回车事件

 <el-input  v-model="input" @keyup.enter.native="search1">

解决方法一:在el-form表单加上@submit.native.prevent

<el-form @submit.native.prevent>
<el-input v-model="input" @keyup.enter.native="search1">
</el-form>

 


解决方法二:加一个隐藏的文本框,即表单不只有一个文本框

<el-form >
<el-form-item >
<el-input v-model="input" @keyup.enter.native="search1">
</el-form-item>
<el-form-item style="margin-bottom:0;display:none;">
<el-input></el-input>
</el-form-item>

</el-form >