100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue+element Form键盘回车事件页面刷新解决

vue+element Form键盘回车事件页面刷新解决

时间:2019-10-10 15:50:25

相关推荐

vue+element Form键盘回车事件页面刷新解决

问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览器会刷新页面的问题;

<el-form :inline="true" class="demo-form-inline"><el-form-item label="基金名称:" style="margin-bottom:0"><el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input></el-form-item><el-form-item style="margin-bottom:0"><el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button></el-form-item></el-form>

搜索了问题触发原因,是由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 导致页面的刷新。

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

<el-form :inline="true" class="demo-form-inline" ><el-form-item label="基金名称:" style="margin-bottom:0"><el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input></el-form-item><el-form-item style="margin-bottom:0;display:none;"><el-input @keyup.enter.native="doFilter(5)"></el-input></el-form-item><el-form-item style="margin-bottom:0"><el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button></el-form-item></el-form>

element官方解决方案:在el-from 加上 @submit.native.prevent

<el-form :inline="true" class="demo-form-inline" @submit.native.prevent><el-form-item label="基金名称:" style="margin-bottom:0"><el-input placeholder="基金名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input></el-form-item><el-form-item style="margin-bottom:0"><el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button></el-form-item></el-form>

以上两种方案均可解决。

来源:/a/1190000016034270

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。