问题描述:以下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览器会刷新页面的问题;element-ui
<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>
搜索了问题触发缘由,是因为当表单只有一个文本框时,按下回车将会触发表单的提交事件, 致使页面的刷新。浏览器
解决方案一:加一个隐藏的文本框,即表单不仅有一个文本框,以下:ui
<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.preventcode
<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>
以上两种方案都可解决。orm