vue中 输入框输入回车后触发搜索(搜索按钮触发页面刷新问题)

一、回车触发搜索

代码

html 复制代码
<el-input
              @keyup.enter.native="keyDownEnter"
              size="medium"
              v-model="orgNameInput"
              placeholder="请输入"
              style="width:200px"
              clearable
            ></el-input>

<el-button type="primary" @click.native.prevent="search(1)" v-auth="'search'" size="medium">搜索</el-button>

js

javascript 复制代码
keyDownEnter (e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode === 13) {
        this.search(1);// 搜索按钮的回调
      }
    },

绑定事件时增加修饰符.enter.native 防止触发页面刷新。search方法中就是搜索数据的相关代码 根据自己的需求进行补充即可(.native.prevent也是修饰符 防止浏览器默认行为:触发浏览器刷新)

相关推荐
TE-茶叶蛋5 分钟前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
Maybyy6 分钟前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈10 分钟前
CSS中的Element语法
前端·css
Real_man16 分钟前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中16 分钟前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术19 分钟前
日历插件-FullCalendar的详细使用
前端·javascript
zhu_zhu_xia20 分钟前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium
咔咔一顿操作21 分钟前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
coding随想1 小时前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt