TreeData 数据查找

TreeData 数据查找

最近做需求的时候遇到了这样的一个需求,Tree组件数据支持查找,而且TreeData的数据层级是无限级的

整体图

开始想的事借助UI组件库(Ant-design-vue)中的Tree组件的相关方法直接实现,看了下api 发现没法实现,后来想通过手动构建节点树实现,这样就需要写递归组件,需要重新写编辑,删除逻辑(本人有点懒所以就没采取),最后还是在数据上动手。

先封装一个查询方法


// 获取配置。  Object.assign 从一个或多个源对象复制到目标对象
const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);// 查询方法 通过传入比较函数,找出符合规则的数据
export function filter<T = any>(tree: T[],func: (n: T) => boolean,// Partial 将 T 中的所有属性设为可选config: Partial<TreeHelperConfig> = {},
): T[] {// 获取配置config = getConfig(config);const children = config.children as string;function listFilter(list: T[]) {return list.map((node: any) => ({ ...node })).filter((node) => {// 递归调用 对含有children项  进行再次调用自身函数 listFilternode[children] = node[children] && listFilter(node[children]);// 执行传入的回调 func 进行过滤return func(node) || (node[children] && node[children].length);});}// 返回符合结果数据return listFilter(tree);
}

方法调用

    const fieldNames = { children: 'children', title: 'name', key: 'id' };treeData.value = filter(//原始数据originalTreeData, //过滤函数(node) => {const result = node[titleField]?.includes(searchValue.value) ?? false;if (result) {expandedKeys.value.push(node[keyField]);}return result;},fieldNames,);

这就实现了,此种方法可以支持element、ant-design-vue、iview 等多种Ui框架

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

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

相关文章

超级实用的python代码片段汇总和详细解析(16个)

目录 1. 生成随机文本 2. 计算文本文件中的字数 3. 替换文件文件中的字串 4. 多文件名的批量替换 5. 从网站提取数据 6. 批量下载图片 7.批量删除空文件夹 8.Excel表格读写 9.合并Excel表格工作簿 10.数据库SQL查询 11. 系统进程查杀 12.图像尺寸调整和裁剪 13.图…

redis实现消息队列redis发布订阅redis监听key

文章目录 Redis消息队列实现异步秒杀1. jvm阻塞队列问题2. 什么是消息队列3. Redis实现消息队列1. 基于List结构模拟消息队列操作优缺点 2. 基于PubSub发布订阅的消息队列操作优缺点spring 结合redis的pubsub使用示例1. 引入依赖2. 配置文件3. RedisConfig4. CustomizeMessageL…

大语言模型的开山之作—探秘GPT系列:GPT-1-GPT2-GPT-3的进化之路

模型模型参数创新点评价GPT1预训练微调&#xff0c; 创新点在于Task-specific input transformations。GPT215亿参数预训练PromptPredict&#xff0c; 创新点在于Zero-shotZero-shot新颖度拉满&#xff0c;但模型性能拉胯GPT31750亿参数预训练PromptPredict&#xff0c; 创新点…

pclpy 可视化点云(多窗口可视化、单窗口多点云可视化)

pclpy 可视化点云&#xff08;多窗口可视化、单窗口多点云可视化&#xff09; 一、算法原理二、代码三、结果1.多窗口可视化结果2.单窗口多点云可视化 四、相关数据五、问题与解决方案1.问题2.解决 一、算法原理 原理看一下代码写的很仔细的。。目前在同一个窗口最多建立2个窗…

ESP8266智能家居(3)——单片机数据发送到mqtt服务器

1.主要思想 前期已学习如何用ESP8266连接WIFI&#xff0c;并发送数据到服务器。现在只需要在单片机与nodeMCU之间建立起串口通信&#xff0c;这样单片机就可以将传感器测到的数据&#xff1a;光照&#xff0c;温度&#xff0c;湿度等等传递给8266了&#xff0c;然后8266再对数据…

【AI应用】SoraWebui——在线文生视频工具

SoraWebui 是一个开源项目&#xff0c;允许用户使用 OpenAI 的 Sora 模型使用文本在线生成视频&#xff0c;从而简化视频创建&#xff0c;并具有轻松的一键网站部署功能 在 Vercel 上部署 1. 克隆项目 git clone gitgithub.com:SoraWebui/SoraWebui.git 2. 安装依赖 cd Sor…

【Java EE初阶二十】http的简单理解(一)

1. 初识http HTTP 最新的版本应该是 HTTP/3.0&#xff0c;目前大规模使用的版本 HTTP/1.1&#xff1b; 下面来简单说明一下使用 HTTP 协议的场景: 1、浏览器打开网站 (基本上) 2、手机 APP 访问对应的服务器 (大概率) 前面的 TCP与UDP 和http不同&#xff0c;HTTP 的报文格式&a…

React基础-webpack+creact-react-app创建项目

学习视频&#xff1a;学习视频 2节&#xff1a;webpack工程化创建项目 2.1.webpack工程化工具&#xff1a;vite/rollup/turbopak; 实现组件的合并、压缩、打包等&#xff1b; 代码编译、兼容、校验等&#xff1b; 2.2.React工程化/组件开发 我们可以基于webpack自己去搭建…

sql-labs25-28a

一、环境 网上都有不过多阐述 二、sql-labs第25关 它说你的OR和and属于它,那就是过滤了OR和and 注入尝试 不用or和and进行爆破注入,很明显是有注入点的 ?id-1 union select 1,2,3-- 查看数据库 ok&#xff0c;此道题算是解了但是如果我们用了and了呢 ?id-1 and updatex…

浅谈集群的分类

本文主要介绍集群部署相关的知识&#xff0c;介绍集群部署的基础&#xff0c;集群的分类、集群的负载均衡技术&#xff0c;集群的可用性以及集群的容错机制。随后介绍Redis-Cluster以及Mysql的架构以及主从复制原理。 集群介绍 单台服务器本身会受到带宽、内存、处理器等多方面…

STM32-串口通信(串口的接收和发送)

文章目录 STM32的串口通信一、STM32里的串口通信二、串口的发送和接收串口发送串口接收 三、串口在STM32中的配置四、串口接收的两种实现方式1. 需要更改的地方2. 查询RXNE标志位3. 使用中断 总结 STM32的串口通信 本文在于记录自己的学习过程中遇到的问题和总结&#xff0c;各…

大型语言模型的语义搜索(一):关键词搜索

关键词搜索(Keyword Search)是文本搜索种一种常用的技术&#xff0c;很多知名的应用app比如Spotify、YouTube 或 Google map等都会使用关键词搜索的算法来实现用户的搜索任务&#xff0c;关键词搜索是构建搜索系统最常用的方法&#xff0c;最常用的搜索算法是Okapi BM25&#x…

Liunx使用nginx和http搭建yum-server仓库

文章目录 1. yum-server的搭建方式2. nginx搭建yum-server仓库2.1. 安装配置nginx2.2 配置yum-server的rpm2.3. 同步yum源相关包2.3.1 rsync同步源3.3.1 reposync同步源 2.4. 配置客户端访问yum配置2.5. 验证测试 3. http服务搭建yum-server仓库3.1. 安装配置http3.2 配置yum-s…

Firewalld防火墙

Firewalld概述 Firewalld firewalld防火墙是centos7系统默认防火墙的防火墙管理工具&#xff0c;取代了之前的iptables防火墙&#xff0c;也是工作在网络层&#xff0c;属于包过滤防火墙。 支持网络区域所定义的网络链接以及接口安全等级的动态防火墙管理工具至此IPv4、IPv6…

studio one 6正版多少钱?怎么购买studio one 更便宜,有优惠券哦

Presonus Studio One Studio One是由美国PreSonus公司开发的数字音频工作站&#xff0c;作为DAW届的新人&#xff0c;功能强大且全面&#xff0c;虽然它不像其他DAW那样拥有历史和声誉&#xff0c;但它是一个可爱的软件&#xff0c;包含许多其它DAW所不具备的实用功能&#xff…

web基础及http协议 (二)----------Apache相关配置与优化

一、httpd 安装组成 http 服务基于 C/S 结构 1 .常见http 服务器程序 httpd apache&#xff0c;存在C10K&#xff08;10K connections&#xff09;问题 nginx 解决C10K问题lighttpd IIS .asp 应用程序服务器 tomcat .jsp 应用程序服务器 jetty 开源的servlet容器&#xf…

选择 Python IDE(VSCode、Spyder、Visual Studio 2022和 PyCharm)

前言 当选择 Python 开发工具时&#xff0c;你需要考虑自己的需求、偏好和项目类型。下面是对VSCode、Spyder、Visual Studio 2022和 PyCharm的对比推荐总结&#xff1a; 结论 1、如果你专注于“数据科学”&#xff0c;选择SpyDer没错。 内容 Visual Studio Code (VS Code)…

CleanMyMac2024苹果电脑清理工具最新使用全面评价

作为软件评价专家&#xff0c;我对CleanMyMac X进行了全面的评估&#xff0c;以下是我的详细评价&#xff1a; CleanMyMac X4.14.6全新版下载如下: https://wm.makeding.com/iclk/?zoneid49983 一、功能 CleanMyMac X的功能相当全面&#xff0c;几乎涵盖了Mac电脑清理所需的…

nginx 具体介绍

一&#xff0c;nginx 介绍 &#xff08;一&#xff09;nginx 与apache 1&#xff0c; Apache event 模型 相对于 prefork 模式 可以同时处理更多的请求 相对于 worker 模式 解决了keepalive场景下&#xff0c;长期被占用的线程的资源浪费问题 因为有监听线程&#…

【数据结构】链式队列

链式队列实现&#xff1a; 1.创建一个空队列 2.尾插法入队 3.头删法出队 4.遍历队列 一、main函数 #include <stdio.h> #include "./3.linkqueue.h" int main(int…