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

相关文章
|
6天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
21 0
|
1天前
|
JavaScript Java 关系型数据库
基于SprinBoot+vue的租房管理系统2
基于SprinBoot+vue的租房管理系统2
9 0
|
2天前
|
自然语言处理 JavaScript 数据可视化
5个值得推荐的Vue后台管理框架
几个优秀好看的 Vue 后台管理框架,每个框架都有自己的特点和优势,开发者可以根据项目需求选择适合的框架。
14 0
|
3天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
13 3
|
6天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
13 1
|
6天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
7天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
7天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
12 0
|
6天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
6天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据