当前位置: 首页 > article >正文

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

一、回车触发搜索

代码

<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


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

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


http://www.kler.cn/a/471928.html

相关文章:

  • 用户界面软件02
  • MCU 和 PSK
  • flutter 专题二十四 Flutter性能优化在携程酒店的实践
  • 【VUE+ElementUI】通过接口下载blob流文件设置全局Loading加载进度
  • 调整Python+Pytest+Allure+Yaml+Pymysql框架中需要执行的用例顺序
  • 算法5--位运算
  • 【Nginx】Nginx 最新社区稳定版-1.26.2-发布
  • Mysql之炸裂函数(难点★★★★★)
  • 中国税务年鉴PDF电子版Excel2022年-社科数据
  • 05容器篇(D2_集合 - D5_企业容器常用 API)
  • 【Rust自学】10.7. 生命周期 Pt.3:输入输出生命周期与3规则
  • java ShaUtils sha1如何生成签名?
  • uniapp下的手势事件
  • Vue 3 详解
  • 锂电池剩余寿命预测 | 基于BiLSTM-Attention的锂电池剩余寿命预测,附锂电池最新文章汇集
  • 2、zookeeper和kafka
  • List ---- 模拟实现LIST功能的发现
  • 23.行号没有了怎么办 滚动条没有了怎么办 C#例子
  • IP Anycast 与 CDN
  • c/c++ 里的进程间通信 , 管道 pipe 编程举例
  • 接口项目架构流程图-thinkphp6-rabbitmq
  • QT学习十九天 QT核心机制
  • WebRtc02: WebRtc架构、目录结构、运行机制
  • Lianwei 安全周报|2024.1.7
  • 【Java】JVM内存相关笔记
  • 代理IP授权机制:保障安全与效率的双重考量