前端实现搜索功能

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

认识Linux指令之 “ head tail ” 命令

01.head指令 head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾。 语法: head [参数]... [文件]... 功能&#…

SAP CO11N报工批次分割(拆分)

CO11N做报工的时候,下阶料启用了批次,比如需要过账4166个,但是每一批次的库存都不满足4166个,所以需要拆分(分割)处理 这个时候我们就需要对这一行做分割处理 选中这一行,点击‘分割’按钮 弹…

Speech | 语音克隆Openvoice的论文解读及项目实现

本文主要介绍了语音克隆Openvoice的论文以及项目实现~ 论文题目:OpenVoice: Versatile Instant Voice Cloning 论文地址:2312.01479.pdf (arxiv.org) 项目地址:https://github.com/myshell-ai/OpenVoice.git 官网:Home (myshell.a…

C 练习实例23

题目:打印出如下图案(菱形)。 * *** ***** ******* ***** *** * 题目分析: 先打印前4行,因为是递增关系。 第0行:打印3个空格,1个* 第1行:打印2个空格,3个*…

【Github-Action】GithubAction 环境下,如何将临时生成的文件推送至指定分支。

通过这篇文章你可以掌握如何将github action 环境下临时生成的文件推送至指定分支,并且可以打开利用github开放的api做各种强大或有趣的事情的视野和思路。 如果你对github-action感兴趣,还可以看这篇文章, 这篇文章教会你如何开发Github Act…

分布式系统架构设计之分布式消息队列中间件的技术选型报告

1、主流消息队列中间件 01 Kafka 基本原理 Kafka 基于发布-订阅模式,它维护了一个或多个 Topic,生产者将消息发送到 Topic,消费者从 Topic 中读取消息。Kafka 强调高吞吐量,通过批量处理、顺序 I/O 和零拷贝等技术实现高性能 …

微信扫码进入小程序特定页面

小程序配置 开发 - 开发管理 - 开发设置-普通链接二维码打开小程序 配置好的截图 如下:二维码规则建议是自己的域名 /mini/ 功能页面 pages/index/index 是为了方便跳转其他页面 记得把校验文件发给后端 web 端处理 二维码格式为:二维码规则/功能页…

基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统

Tansci-Boot 基于 SpringBoot2 magic-api Vue3 Element Plus amis3.0 快速开发管理系统 Tansci-Boot 是一个前后端分离后台管理系统, 前端集成 amis 低代码前端框架,后端集成 magic-api 的接口快速开发框架。包含基础权限、安全认证、以及常用的一…

2024美赛数学建模思路 - 复盘:人力资源安排的最优化模型

文章目录 0 赛题思路1 描述2 问题概括3 建模过程3.1 边界说明3.2 符号约定3.3 分析3.4 模型建立3.5 模型求解 4 模型评价与推广5 实现代码 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 描述 …

【深度学习:数据增强】计算机视觉中数据增强的完整指南

【深度学习:数据增强】计算机视觉中数据增强的完整指南 为什么要做数据增强?等等,什么是数据增强?数据增强技术数据增强的注意事项和潜在陷阱什么时候应该做数据增强?类不平衡的数据增强那么我应该选择哪些转换呢&…

【Wordpress高级教程】 Wordpress免插件建立站群,wordpress整站迁移/安装

提示:该方法适用于Wordpress的站点,且无需插件哦(插件一般都需要付费的,博主比较穷,我们就通过技术来解决) 文章目录 前言一、准备工作二、搭建站群1.打包wp-content2.导入新站点3.导出数据库4.修改数据库配…

redis的高可用(主从复制、哨兵、群集)

redis的高可用(主从复制、哨兵、群集) 主从复制:主从复制是高可用Redis的基础,哨兵和集群都是在主从复制基础上实现高可用的。主从复制主要实现了数据的多机备份,以及对于读操作的负载均衡和简单的故障恢复。缺陷&…

[Docker] Mac M1系列芯片上完美运行Docker

docker pull qinchz/dm8-arm64 container_name: dm8ports:- "5236:5236"mem_limit: 1gmemswap_limit: 1gvolumes:- /data/dm8:/home/dmdba/data 数据库实例参数已修改,接近oracle使用习惯 #字符集 utf-8 CHARSET1 #VARCHAR 类型对象的长度以字符为单位 …

vmware虚拟机内存异常占用问题一例

关键词 vmware esxi、hypervisor虚拟化平台内存模式 Guest virtual memory 一、问题现象 业务一台vmware虚拟机出现内存使用率告警,运维人员登录系统检查内存确实高水位状态 检查各进程使用内存不高,合计内存总数与使用率占用情况明显不匹配&#xf…

将dumpbin从Visual Studio中抠出来,并使用dumpbin查看exe和dll库的依赖关系

目录 1、初步说明 2、在开发的机器上使用dumpbin工具查看dll库的依赖关系 3、将dumpbin.exe从Visual Studio中抠出来 3.1、找到dumpbin.exe文件及其依赖的dll文件 3.2、在cmd中运行dumpbin,提示找不到link.exe文件 3.3、再次运行dumpbin.exe提示找不到mspdb10…

UV胶水能够粘接聚苯乙烯PS吗?需要注意哪些事项?又有哪些优势呢?

聚苯乙烯(Polystyrene,简称PS)是一种常见的合成聚合物,属于热塑性塑料。它是由苯乙烯单体聚合而成的,具有轻质、透明或半透明、电绝缘性好等特点。常见: 包装材料白色泡沫塑料(EPS,用于包装、保…

排序链表[中等]

一、题目 给你链表的头结点head,请将其按 升序 排列并返回 排序后的链表 。 示例 1: 输入:head [4,2,1,3] 输出:[1,2,3,4] 示例 2: 输入:head [-1,5,3,4,0] 输出:[-1,0,3,4,5] 示例 3&…

Python多线程同步

同步条件(Event) 在Python中,多线程同步可以通过threading模块中的Event对象来实现。Event对象允许一个或多个线程等待某个事件的发生,当事件发生时,等待的线程将被唤醒。 event.isSet():返回event的状态值 event.wait()&#x…

项目-新闻头条-数据管理平台-ajax综合案例

愿许秋风知我意&#xff0c;解我心中意难平。 项目介绍 项目准备 推荐使用&#xff0c; 每个程序员都有自己的管理方式。 验证码登录 HTML结构&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><met…

线性回归(Linear Regression)

什么是机器学习 线性回归是一种用于建立变量之间线性关系的统计模型。在简单线性回归中&#xff0c;我们考虑一个自变量和一个因变量的关系&#xff0c;而在多元线性回归中&#xff0c;我们考虑多个自变量和一个因变量之间的关系。 简单线性回归 简单线性回归模型可以表示为…
最新文章