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也是修饰符 防止浏览器默认行为:触发浏览器刷新)

相关推荐
南半球与北海道#2 分钟前
el-table合并单元格
javascript·vue.js·elementui·表格合并
跟橙姐学代码8 分钟前
学Python,先把这“三板斧”练到炉火纯青!(零基础也能看懂)
前端·python
Jimmy11 分钟前
客户端存储 - IndexedDB
前端·javascript·indexeddb
滕本尊13 分钟前
从业务到框架:Elpis 企业级应用的 NPM 包抽离实践
前端·全栈
木春15 分钟前
React入门:构建你的第一个应用
前端·react.js
gzzeason20 分钟前
ES6+内置进制转换方法
前端·ecmascript·es6
华洛27 分钟前
落地AI产品的最后一步:微调(面向非LLM算法工程师)
前端·aigc·产品经理
成小白31 分钟前
前端实现两个页面之间的通讯
前端·javascript
啷咯哩咯啷41 分钟前
element-plus el-tree-v2大数据量勾选节点卡顿问题
前端·javascript·vue.js
阳光阴郁大boy2 小时前
一个基于纯前端技术实现的五子棋游戏,无需后端服务,直接在浏览器中运行。
前端·游戏