React+Antd+tree实现树多选功能(选中项受控+支持模糊检索)

1、先上效果

树型控件,选中项形成一棵新的树,若父选中,子自动选中,子取消,父不取消,子选中,所有的父节点自动取消。同时支持模糊检索,会检索出所有包含该内容的关联节点。

2、环境准备

1、react18

2、antd 4+

3、代码实现

原理:利用antd的tree组件,可以通过设置Tree组件的checkable属性为true,启用了多选功能,当节点被选中或取消选中时,会触发onCheck事件,我们可以在该事件处理函数中更新checkedKeys状态 通过控制checkedKeys来实现你想要的选中,核心代码如下:

checkStrictly设置为true,表示子节点选择受控,

     <DirectoryTree...checkable={checkable}expandedKeys={expandedKeys}treeData={treeData || []}checkedKeys: checkKeys,checkStrictly: true,onCheck: (selectedKeys: any, other) => {// 当前节点的所有下级子节点const childrenNodeKeys = getAllChildrenNodeKey(other?.node);const node: any = other?.node;if (other?.checked) {// 当前节点的所有上级父节点const parentKeys = Array.isArray(node?.parentId) ? node?.parentId : [];let currentSelectedKeys = [...selectedKeys?.checked, ...parentKeys, ...childrenNodeKeys].filter((item: any, i: number, self: any): item is React.Key =>!!(item && self?.indexOf?.(item) === i),);setCheckKeys?.(currentSelectedKeys);onCheck?.(currentSelectedKeys)} else {const currentSelectedKeys = (selectedKeys?.checked || []).filter(((key: string) => !childrenNodeKeys.includes(key) && key !== node?.rowId))setCheckKeys(currentSelectedKeys);onCheck?.(currentSelectedKeys);}}/>

 当前节点的所有下级子节点

  const getAllChildrenNodeKey = (node: any) => {const result: any = [];const getChildrenKey = (childrenList: any) => {if (childrenList && childrenList.length > 0) {childrenList.forEach((item: any) => {if (item?.rowId) {result.push(item?.rowId)}if (item?.children && item?.children.length > 0) {getChildrenKey(item?.children || []);}});}}getChildrenKey(node?.children || []);return result;}

tree属性如下:

allowDrop是否允许拖拽时放置在该节点({ dropNode, dropPosition }) => boolean-
autoExpandParent是否自动展开父节点booleanfalse
blockNode是否节点占据一行booleanfalse
checkable节点前添加 Checkbox 复选框booleanfalse
checkedKeys(受控)选中复选框的树节点(注意:父子节点有关联,如果传入父节点 key,则子节点自动选中;相应当子节点 key 都传入,父节点也自动选中。当设置 checkable 和 checkStrictly,它是一个有checkedhalfChecked属性的对象,并且父子节点的选中与否不再关联string[] | {checked: string[], halfChecked: string[]}[]
checkStrictlycheckable 状态下节点选择完全受控(父子节点选中状态不再关联)booleanfalse
defaultCheckedKeys默认选中复选框的树节点string[][]
defaultExpandAll默认展开所有树节点booleanfalse
defaultExpandedKeys默认展开指定的树节点string[][]
defaultExpandParent默认展开父节点booleantrue
defaultSelectedKeys默认选中的树节点string[][]
disabled将树禁用booleanfalse
draggable设置节点可拖拽,可以通过 icon: false 关闭拖拽提示图标boolean | ((node: DataNode) => boolean) | { icon?: React.ReactNode | false, nodeDraggable?: (node: DataNode) => boolean }falseconfig: 4.17.0
expandedKeys(受控)展开指定的树节点string[][]
fieldNames自定义节点 title、key、children 的字段object{ title: title, key: key, children: children }4.17.0
filterTreeNode按需筛选树节点(高亮),返回 truefunction(node)-
height设置虚拟滚动容器高度,设置后内部节点不再支持横向滚动number-
icon自定义树节点图标。ReactNode | (props) => ReactNode-
loadData异步加载数据function(node)-
loadedKeys(受控)已经加载的节点,需要配合 loadData 使用string[][]
multiple支持点选多个节点(节点本身)booleanfalse
rootStyle添加在 Tree 最外层的 styleCSSProperties-4.20.0
selectable是否可选中booleantrue
selectedKeys(受控)设置选中的树节点,多选需设置 multiple 为 truestring[]-
showIcon是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式booleanfalse
showLine是否展示连接线boolean | { showLeafIcon: ReactNode | ((props: AntTreeNodeProps) => ReactNode) }false
switcherIcon自定义树节点的展开/折叠图标ReactNode | ((props: AntTreeNodeProps) => ReactNode)-renderProps: 4.20.0
titleRender自定义渲染节点(nodeData) => ReactNode-4.5.0
treeDatatreeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 在整个树范围内唯一)array<{key, title, children, [disabled, selectable]}>-
virtual设置 false 时关闭虚拟滚动booleantrue4.1.0
onCheck点击复选框触发function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys})-
onDragEnddragend 触发时调用function({event, node})-
onDragEnterdragenter 触发时调用function({event, node, expandedKeys})-
onDragLeavedragleave 触发时调用function({event, node})-
onDragOverdragover 触发时调用function({event, node})-
onDragStart开始拖拽时调用function({event, node})-
onDropdrop 触发时调用function({event, node, dragNode, dragNodesKeys})-
onExpand展开/收起节点时触发function(expandedKeys, {expanded: boolean, node})-
onLoad节点加载完毕时触发function(loadedKeys, {event, node})-
onRightClick响应右键点击function({event, node})-
onSelect点击树节点触发function(selectedKeys, e:{selected: boolean, selectedNodes, node, event})-

 关注我并且留言发源码

或者自动下载

https://download.csdn.net/download/yalywq/88814803?spm=1001.2014.3001.5503

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

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

相关文章

嵌入式学习Day14 C语言 --- 位运算

位运算 注意&#xff1a;符号位也遵循这个规则 一、按位与(&) 运算规则&#xff1a;一假则假 int a 0x33;a & 0x55;0011 00110101 0101 &----------0001 0001 //0x11 二、按位或(|) 运算规则&#xff1a;一真则真 int a 0x33;a |0x55;0011 00110101 0101 |…

使用Python语言生成区块链地址

# 单次运行 import binascii import sha3 from ecdsa import SigningKey, SECP256k1priv SigningKey.generate(curveSECP256k1) # 生成私钥 pub priv.get_verifying_key() # 生成公钥keccak sha3.keccak_256() keccak.update(pub.to_string()) # keccak_256哈希运算 addr…

Elasticsearch:使用 Inference API 进行语义搜索

在我之前的文章 “Elastic Search 8.12&#xff1a;让 Lucene 更快&#xff0c;让开发人员更快”&#xff0c;我有提到 Inference API。这些功能的核心部分始终是灵活的第三方模型管理&#xff0c;使客户能够利用当今市场上下载最多的向量数据库及其选择的转换器模型。在今天的…

【Linux】基于管道进行进程间通信

进程间通信 一、初识进程间通信1. 进程间通信概念2. 进程间通信分类 二、管道1. 管道概念2. 管道原理3. 匿名管道4. 匿名管道系统接口5. 管道的特性和情况6. 匿名管道的应用&#xff08;1&#xff09;命令行&#xff08;2&#xff09;进程池 7. 命名管道&#xff08;1&#xff…

19.HarmonyOS App(JAVA)依赖布局DependentLayout使用方法

layout/ability_main.xml 显示位置不对&#xff1a;检查布局文件ohos:lef_of "id:tuzi",比如显示在兔子的左侧&#xff0c;这里就会显示不对。 需要id前没有$符号。改为&#xff1a; ohos:lef_of "$id:tuzi" <?xml version"1.0" encodi…

【机器学习】机器学习流程之收集数据

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步…

ChatGPT 3.5与4.0:深入解析技术进步与性能提升的关键数据

大家好&#xff0c;欢迎来到我的博客&#xff01;今天我们将详细比较两个引人注目的ChatGPT版本——3.5和4.0&#xff0c;通过一些关键数据来深入解析它们之间的差异以及4.0版本的技术进步。 1. 模型规模与参数 ChatGPT 3.5&#xff1a; 参数数量&#xff1a;约1.7亿个模型层数…

【Qt】常见问题

1.存在未解析的标识符 将build文件夹删掉重新编译。 2.左侧项目目录栏无法删除已添加项目 打开目标项目上一级的pro文件&#xff0c;将目标文件名字注释或者删除掉&#xff0c;最后保存&#xff0c;qt就会自动更新&#xff0c;将该项目隐藏掉。 3.在qt creator下添加槽函数…

MySQL数据引擎、建库及账号管理

目录 一、MySQL数据库引擎 1.1.MySQL常见数据库引擎 1.InnoDB(MySQL默认引擎) 2.MyISAM 3.MEMORY&#xff08;Heap&#xff09; 1.2.存储引擎查看 二、建库 1.默认数据库介绍 2.建库 3.查看数据库 4.删除数据库 三、账号管理 1.创建用户 1.创建用户并设置登陆密码…

在angular12中proxy.conf.json中配置详解

一、proxy.conf.json文件的目录 二、proxy.conf.json文件中的配置 "/xxx/api": {"target": "地址/api","secure": false,"logLevel": "debug","changeOrigin": true,"pathRewrite": {"…

TCP 粘包/拆包

文章目录 概述粘包拆包发生场景解决TCP粘包和拆包问题的常见方法Netty对粘包和拆包问题的处理小结 概述 TCP的粘包和拆包问题往往出现在基于TCP协议的通讯中&#xff0c;比如RPC框架、Netty等 TCP 粘包/拆包 就是你基于 TCP 发送数据的时候&#xff0c;出现了多个字符串“粘”…

excel 导出 The maximum length of cell contents (text) is 32767 characters

导出excel报错。错误日志提示&#xff1a;:The maximum length of cell contents (text) is 32767 characters 排查后&#xff0c;发现poi有单元格最大长度校验&#xff0c;超过32767会报错。 解决方案&#xff1a; 通过java反射机制&#xff0c;设置单元格最大校验限制为Int…

EasyCVR视频融合平台如何助力执法记录仪高效使用

旭帆科技的EasyCVR平台可接入的设备除了常见的智能分析网关与摄像头以外 &#xff0c;还可通过GB28181协议接入执法记录仪&#xff0c;实现对执法过程的全称监控与录像&#xff0c;并对执法轨迹与路径进行调阅回看。那么&#xff0c;如何做到执法记录仪高效使用呢&#xff1f; …

THM学习笔记——枚举

复制以下内容时注意中英文符号区别 在枚举之前我们要将shell升级为完全交互式的tty。 这涉及以下几条命令 python -c import pty;pty.spawn("/bin/bash") stty raw -echo export TERMxterm rlwrap nc -lvnp 443 从以上选一条即可 手动枚举 以下命令只需了解即可&…

使用vite创建vue+ts项目,整合常用插件(scss、vue-router、pinia、axios等)和配置

一、检查node版本 指令&#xff1a;node -v 为什么要检查node版本&#xff1f; Vite 需要 Node.js 版本 18&#xff0c;20。然而&#xff0c;有些模板需要依赖更高的 Node 版本才能正常运行&#xff0c;当你的包管理器发出警告时&#xff0c;请注意升级你的 Node 版本。 二、创…

Python爬虫学习之scrapy库

一、scrapy库安装 pip install scrapy -i https://pypi.douban.com/simple 二、scrapy项目的创建 1、创建爬虫项目 打开cmd 输入scrapy startproject 项目的名字 注意:项目的名字不允许使用数字开头 也不能包含中文 2、创建爬虫文件 要在spiders文件…

HTML 样式学习手记

HTML 样式学习手记 在探索网页设计的世界时&#xff0c;我发现HTML元素的样式调整真的是个很酷的环节。通过简单的属性设置&#xff0c;就能让文字换上五彩斑斓的颜色、变换各异的字体和大小。特别是那个style属性&#xff0c;感觉就像是一扇通往CSS魔法世界的大门。 代码小试…

【知识图谱+大模型的紧耦合新范式】Think-on-Graph:解决大模型在医疗、法律、金融等垂直领域的幻觉

Think-on-Graph&#xff1a;解决大模型在医疗、法律、金融等垂直领域的幻觉 Think-on-Graph 原理ToG 算法步骤&#xff1a;想想再查&#xff0c;查查再想实验结果 论文&#xff1a;https://arxiv.org/abs/2307.07697 代码&#xff1a;https://github.com/IDEA-FinAI/ToG Think…

Docker搭建MySQL8主从复制

之前文章我们了解了面试官&#xff1a;说一说Binlog是怎么实现的&#xff0c;这里我们用Docker搭建主从复制环境。 docker安装主从MySQL 这里我们使用MySQL8.0.32版本&#xff1a; 主库配置 master.cnf //基础配置 [client] port3306 socket/var/run/mysqld/mysql.sock [m…

如何使用phpStudy搭建网站并结合内网穿透远程访问本地站点

文章目录 [toc]使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点&#xff0c;测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中&#xff0c;查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2…