前端实现搜索功能

最近遇到一个需求,用户在输入框输入关键字之后,点击搜索按钮后进行搜索,如下图,选中的数据在下面,上面展现的是搜索后的数据,现在选中了2条数据:
在这里插入图片描述
当用户输入KET后点击搜索,搜出的结果有16条,勾选全选选中后,将选中的16条的数据加到之前已选的2条数据里,于是此时已选的数据里有了18条
在这里插入图片描述
当我清空搜索词,点击搜索后,结果如下,上面还原到了最开始的21条数据,然后已选的里面还是18条数据:
在这里插入图片描述
当我们点击下一步时,会将已选的18条数据带到下一步的逻辑里。为了实现上面的效果,初始数据originList,页面上展示的数据myOriginList,选中的数据selectArr,是否全选中checkAll,实现思路是点击搜索按钮后,触发search方法,先判断输入框是否有搜索词,区别处理,如果有搜索词的话,先拷贝一份源数据originList,也就是先拷贝一份初始数据,然后通过数组的filter+includes方法实现过滤,将过滤后得到的数组回显到页面myOriginList上&#x

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云云服务器u1实例和e实例有什么区别?

阿里云服务器u1和e实例有什么区别?ECS通用算力型u1实例是企业级独享型云服务器,ECS经济型e实例是共享型云服务器,所以相比较e实例,云服务器u1性能更好一些。e实例为共享型云服务器,共享型实例采用非绑定CPU调度模式&am…

如何启动、停止rocketmq

RocketMQ 是一个分布式消息中间件,启动、停止RocketMQ 实际上意味着重启 RocketMQ 的各个组件,包括 Namesrv、Broker 等。以下是一个通用的重启步骤,具体步骤可能会根据你的部署方式和 RocketMQ 版本有所不同: 1. 停止rocketmq …

prometheus 监控 Hyperledger Fabric 网络

本例中使用的 fabric 版本为 2.4.1 修改 orderer , peer 节点 docker-compose 文件 orderer 节点: environment:- ORDERER_METRICS_PROVIDERprometheus- ORDERER_OPERATIONS_LISTENADDRESS0.0.0.0:8443 ports:- 8443:8443peer 节点: environment:- CO…

ConcurrentLinkedQueue原理探究

ConcurrentLinkedQueue是线程安全的无界非阻塞队列,其底层数据结构使用单向链表实现,对于入队和出队操作使用CAS来实现线程安全。下面我们来看具体实现。 类图结构 为了能从全局直观地了解ConcurrentLinkedQueue的内部构造,先简单介绍Concu…

步入式汽车零件阳光模拟试验箱

汽车零件阳光模拟试验箱辐照光源采用金属卤素灯管,该产品按照其技术性能规定保证了光谱分布,非常适合运用在 汽车零件阳光模拟系统中。灯具的反光罩使用对称抛物面反射,以保证其高平行光束反射率。灯组由带有实际功率调节功能的电子电源&am…

大前端nestjs入门教程系列(四):如何nestjs整合mysql数据库

经过前面的几篇文章,想必大家已经对nestjs有了基础的了解,那么这篇文章就带大家玩玩数据库,学会了这篇,就离大前端又进了一步 Nest与数据库无关,使你可以轻松地与任何 SQL 或 NoSQL 数据库集成。 根据你的喜好&#xf…

javaweb基础----JDBC(一)

一、什么是JDBC JDBC全称为Java数据库连接(Java Database Connectivity),是一套用于执行SQL语句的Java API。应用程序可以通过这套API连接到关系型数据库,并使用SQL语句完成对数据中数据的查询、增加、更新和删除等操作。 JDBC在应用程序与数据库之间起到了一个桥…

C语言KR圣经笔记 5.6指针数组;指针的指针

5.6 指针数组;指针的指针 因为指针本身也是变量,所以它们也能像其他变量一样保存在数组里面。我们写个程序来说明,该程序将一些文本行按照字母顺序排列,算是 UNIX 程序 sort 的精简版本。 在第三章中,我们介绍了对一…

首个!美创科技助力大型能源央企数据安全能力成熟度评估及规划建设

2024开年,再传捷报。美创科技首个核电行业数据安全治理项目,也是首个大型能源央企数据安全治理项目落地!美创数据安全治理咨询团队,助力用户完成数据安全现状评估、数据安全体系标准设计和落地、数据分类分级落地试点、数据安全三…

性能分析与调优: Linux 使用 iperf3 进行TCP网络吞吐量测试

目录 一、实验 1.环境 2.TCP网络吞吐量的微观基准测试 二、问题 1.iperf参数有哪些 2.iperf如何二进制安装 一、实验 1.环境 (1)主机 表1-1 主机 主机架构组件IP备注prometheus 监测 系统 prometheus、node_exporter 192.168.204.18grafana监测…

Arduino类库封装编写-以超声波测距举例

目录 一、前言 二、类封装 1、创建头文件 2、创建源文件 3、条件编译说明 (1)头文件重复定义 (2)版本兼容性预处理 4、用户程序中使用封装的类 5、测试 三、将封装的类制作成库文件 1、创建SR04库文件目录 2、库文件中…

智能网联汽车网络安全测试:渗透测试,模糊测试详细讲解

1. 基础知识 1.1 智能网联汽车架构 车内网络系统架构 随着智能网联汽车电子系统的复杂化,电子电气架构( Electrical/Electronic Architecture, EEA )由分布式向集中式架构演进,如图 2.1 所示。 在汽车 EEA 演进的…