开发者社区> 哈你真皮> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.
+关注继续查看

问题描述:如下代码所示,使用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>

以上两种方案均可解决。

来源:https://segmentfault.com/a/1190000016034270

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue组件入门(六)派发事件的参数传递
Vue组件入门(六)派发事件的参数传递
0 0
Vue中 监听移动端软键盘弹出、收起事件
Vue中 监听移动端软键盘弹出、收起事件
0 0
【Vue 快速入门系列】Vue中的事件用法
【Vue 快速入门系列】Vue中的事件用法
0 0
使用 v-on 指令定义 Vue 中的事件|学习笔记
快速学习使用 v-on 指令定义 Vue 中的事件
0 0
VUE element-ui之Dialog对话框关闭事件
VUE element-ui之Dialog对话框关闭事件
0 0
Vue子组件监听父组件的事件
Vue子组件监听父组件的事件
0 0
前端-vue基础12-事件修饰符
前端-vue基础12-事件修饰符
0 0
前端-vue基11-事件基本使用
前端-vue基11-事件基本使用
0 0
Vue课程60-实现品牌的删除事件
Vue课程60-实现品牌的删除事件
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载