vantUI用popup和picker和field做关键词搜索功能

 <van-field class="mainFileCss" v-model="currentflowmeterLocation" left-icon="search" @click="openPicker" center label="位号"placeholder="请输入位号"><template slot="button"></template></van-field><van-popup v-model="showPicker" class="pickerCss" position="bottom"><!-- v-model.trim 对关键字进行去空处理 @input 输入框自身属性,对输入的值进行实时检测 --><van-field clickable v-model.trim="keyCurrentflowmeterLocation" left-icon="search" placeholder="搜索位号" @input="search"></van-field><van-picker show-toolbar :columns="filterdepartments" @confirm="onConfirmss" @cancel="showPicker=false"></van-picker></van-popup>
  //控制打开弹幕状态  private showPicker: boolean = false//打开后输入的关键词用于匹配private keyCurrentflowmeterLocation: string = ''//picker的显示的数据,通过tabledata和上面的关键字过滤出来的东西private filterdepartments: any[] = []//打开private openPicker() {this.showPicker = truethis.filterdepartments = []this.keyCurrentflowmeterLocation = ''this.search()}//搜索  根据关键字搞一次搜索private search() {this.filterdepartments = []let res = this.tableData.filter((params) => {return params.flowmeterLocation.includes(this.keyCurrentflowmeterLocation)})console.log('搜索res', res)res.forEach((item) => {this.filterdepartments.push(item.flowmeterLocation)})console.log('搜索', this.filterdepartments)}//点击确定后的操作private onConfirmss(value) {this.currentflowmeterLocation = valuethis.onInputBlur()this.showPicker = false}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1559867.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Linux查看下nginx及使用的配置文件

1、查到nginx进程 ps -aef | grep nginx2、通过进行pid查到nginx路径 pwdx <pid>3、根据路径得到配置文件 path***/nginx -t如下&#xff1a;

基于xml配置文件的Spring事务

在项目中对事务属性通常传播属性&#xff0c;回滚属性&#xff0c;隔离级别&#xff0c;超时属性都取默认值&#xff0c;只有只读属性会如下的配置&#xff1a; 什么意思&#xff1a;Service层你的类里的方法&#xff0c;以get&#xff0c;find&#xff0c;select等开头的方法是…

shell注意点

变量命名&#xff1a; 注意&#xff0c;变量名和等号之间不能有空格&#xff0c;定义变量时&#xff0c;变量名不加美元符号$&#xff0c;这可能和你熟悉的所有编程语言都不一样。同时&#xff0c;变量名的命名须遵循如下规则&#xff1a; 只包含字母、数字和下划线&#xff…

【text2sql】ReFSQL检索生成框架

论文标题为《ReFSQL: A Retrieval-Augmentation Framework for Text-to-SQL Generation》&#xff0c;发表在 EMNLP 2023 上。ReFSQL框架通过结构增强检索器来获取与当前问题语义和模式结构相似的样本&#xff0c;然后通过对比学习机制来引导模型学习到这些样本的特定知识&…

10款超实用的Sketch插件合集,别错过!

在 UI 界面设计领域&#xff0c;Sketch 以其高效、轻便的优势获得了不少设计团队的青睐&#xff0c;帮助全球设计师创造了许多妙不可言的作品。在使用 Sketch 的过程中&#xff0c;使用一些 辅助用的 Sketch 插件&#xff0c;可以让我们更加高效地完成设计任务。本文将将揭秘大…

jenkins中的allure和email问题梳理

一、allure相关 1、我安装了jenkins之后需要再安装allure吗&#xff1f;在jenkins插件中心直接安装allure 1.Allure Jenkins Plugin 只是一个集成插件&#xff0c;它要求你在 Jenkins 服务器上安装 Allure 命令行工具&#xff08;Allure Commandline&#xff09;来实际生成报…

Spring Boot教学资源库:从入门到精通

1绪 论 1.1研究背景 目前&#xff0c;在网络大环境下&#xff0c;越来越多高校开始实行网络教学&#xff0c;利用网络教学方式有利于学生更好的学习。 网络教学是指以计算机及网络为基础&#xff0c;来实现教学资源的上传、存储、传播和共享的教学手段。它是一种教学活动&#…

伪随机调制

伪随机调制是一种利用伪随机序列来调制信号的技术&#xff0c;广泛应用于现代通信系统中。其主要目的在于增强信号的抗干扰能力和隐蔽性&#xff0c;同时提升数据传输的安全性。以下是关于伪随机调制的详细介绍&#xff0c;包括原理、数学表达以及应用。 一、原理 1. 伪随机序…

ITSS-IT服务工程师和ITSS-IT服务经理的区别

培训目的差异&#xff1a;ITSS 服务项目经理的培训旨在为应对 IT 服务行业一线管理人员短缺的问题提供有力支持&#xff1b;而 ITSS 服务工程师的培训则致力于向 IT 服务业输送初级人才&#xff0c;协助企业将一部分内部成本转移至社会。 培训方向区分&#xff1a;ITSS 服务经理…

基于Springboot+Vue的智能推荐旅游平台 (含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统中…

【Python】Conda离线执行命令

以下链接证明了想要离线使用conda命令的方法 启用离线模式 — Anaconda documentation 基本上大部分的命令都会提供网络选项 例如creat命令 conda create — conda 24.7.1 文档 - Conda 文档

英国商科毕业论文选题常见错误与解决思路

每到毕业季&#xff0c;英国商科毕业论文的选题和确定题目往往是留学生头痛的一大难题。如何有效确定英国毕业论文题目&#xff1f;如何避免题目中出现一些错误导致研究不能进行&#xff1f;在这篇文章中&#xff0c;翰思教育小编将逐一分析各种可能的问题以及如何避免这些问题…

12.JVM类加载机制

一、什么是JVM JVM是一种计算设备规范&#xff0c;虚构出的一个计算机&#xff0c;具有跨平台的特性&#xff1b; 包含类加载器、程序计数器、执行引擎、堆栈、方法区&#xff08;元数据区&#xff09;、本地方法栈 二、类加载全过程 加载过程如下&#xff1a;加载 --》验证…

Spring Cloud Netflix Hystrix 熔断器讲解和案例示范

在分布式微服务架构中&#xff0c;每个服务之间相互依赖&#xff0c;当某个服务出现故障或延迟时&#xff0c;如果没有有效的故障隔离机制&#xff0c;可能导致整个系统雪崩式的失败。Netflix Hystrix 作为一种熔断器模式&#xff0c;旨在通过隔离服务之间的调用&#xff0c;提…

bladex漏洞思路总结

Springblade框架介绍&#xff1a; SpringBlade是一个基于Spring Boot和Spring Cloud的微服务架构框架&#xff0c;它是由商业级项目升级优化而来的综合型项目。 0x1 前言 最近跟一些大佬学习了blade的漏洞&#xff0c;所以自己总结了一下&#xff0c;在渗透测试过程中&#x…

数据排列组合实现

示例 将以下几组数据 &#xff08;“01”, “02”&#xff09;&#xff0c;&#xff08;“A1”, “A2”, “A3”&#xff09;&#xff0c;&#xff08;“B1”, “B2”&#xff09;&#xff0c;&#xff08;“D1”, “D3”&#xff09;排列组合成&#xff0c;如&#xff1a;01:…

如何利用phpstudy创建mysql数据库

phpStudy诞生于2007年&#xff0c;是一款老牌知名的PHP开发集成环境工具&#xff0c;产品历经多次迭代升级&#xff0c;目前有phpStudy经典版、phpStudy V8&#xff08;2019版&#xff09;等等&#xff0c;利用phpstudy可以快速搭建一个mysql环境&#xff0c;接下来我们就开始吧…

【纯前端实现xlsx的解析并处理成table需要的格式】

概要 xlsx纯前端导入并解析成json 整体架构流程 xlsx导入并解析成json&#xff0c;并与table中的数据进行对比&#xff0c;根据唯一标识更新对应数据项 技术名词解释 vue2xlsx 技术细节 首先下载xlsx依赖 npm install xlsx --save然后在需要导入xlsx的地方 这里主要用in…

【金九银十】笔试通关 + 小学生都能学会的堆排序

算法原理 堆排序是一种基于比较的排序算法&#xff0c;它利用了数据结构中的堆&#xff08;Heap&#xff09;。堆是一种特殊的完全二叉树&#xff0c;分为最大堆&#xff08;Max-Heap&#xff09;和最小堆&#xff08;Min-Heap&#xff09;。在最大堆中&#xff0c;每个父节点…

代码开发效率提升秘籍

&#x1f381;&#x1f449;点击进入文心快码 Baidu Comate 官网&#xff0c;体验智能编码之旅&#xff0c;还有超多福利&#xff01;&#x1f381; 理解代码 大部分的开发场景&#xff0c;不是自己从头开始写码&#xff0c;而是基于历史代码进行增量开发。历史代码往往经历多…