react antd TreeSelect实现自定义标签

 <ProFormTreeSelectlabel="接收对象"name="receiverObjects"colProps={{ span: 16 }}labelCol={{span: 6,}}wrapperCol={{span: 18,}}rules={[{ required: true }]}fieldProps={{showSearch: true,multiple: true,// autoClearSearchValue: true,filterTreeNode: true,treeCheckable: true,treeDataSimpleMode: true,treeNodeFilterProp: 'label',tagRender: (props) => {if (!props.value) return <></>;const ReceiverType = props.value.split('_')[0];let selectTreeData = groupTree;switch (ReceiverType) {case 'group': {selectTreeData = groupTree;break;}case 'user': {selectTreeData = userTree;break;}case 'location': {selectTreeData = locationTree;break;}default:break;}const selectObj = getTreeLabel(selectTreeData, props.value);return (<div className="ant-select-selection-overflow"><div className="ant-select-selection-overflow-item"><span className="ant-select-selection-item" title={selectObj?.label}><span className="ant-select-selection-item-content">{selectObj?.label}</span><spanclassName="ant-select-selection-item-remove"onClick={() => {props.onClose();}}><span className="anticon anticon-close"><CloseOutlined /></span></span></span></div></div>);},dropdownRender: (originNode: ReactNode) => {return (<div><Tabstype="line"className="w-full pl-4"activeKey={activeKey}tabBarStyle={{ height: '32px', marginBottom: '4px' }}onChange={(activeKey) => {setActiveKey(activeKey);}}items={ReceiverType}/>{originNode}</div>);},treeData: treeData,}}/>

selectObj的值是:(单个选项)

tagRender:显示的是单个tag的数据

自定义 tag 内容,多选时生效(props) => ReactNode
  const getTreeLabel = (data: TreeProps, value: string) => {let result: TreeItemProps = {};let fn = function (data: TreeProps) {if (Array.isArray(data)) {for (let i = 0; i < data.length; i++) {const e = data[i];if (e.key === value) {result = e; // 返回的结果等于每一项break;} else if (e.children) {fn(e.children); // 递归调用下边的子项}}}};fn(data); // 调用一下return result;};

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

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

相关文章

NASA:北极辐射-冰桥海冰实验(ARISE)2014年原地云数据产品

ARISE_Cloud_AircraftInSitu_C130_Data 简介 ARISE_Cloud_AircraftInSitu_C130_Data_1是北极辐射-冰桥海冰实验&#xff08;ARISE&#xff09;2014年原地云数据产品。该产品是位于华盛顿的美国宇航局科学任务局地球科学部辐射科学、冰冻层科学和机载科学计划共同努力的成果。…

基于单片机的一氧化碳报警系统的设计与实现

摘 要&#xff1a; 一氧化碳对人体有害&#xff0c;尤其超标时会影响人们的健康 。 因此文章设计了一款基于单片机的一氧化氮报警器设计。 论文通过传感器检测一氧化碳浓度&#xff0c;经过 AD 转换&#xff0c;再把检测信号传递给单片机&#xff0c;经过分析处理&#xff0c…

论文辅助笔记:Large Language Models are Zero-Shot Next LocationPredictors

论文理论部分&#xff1a;论文笔记&#xff1a;lunLarge Language Models are Zero-Shot Next LocationPredictors-CSDN博客 2 Data 2.1 Dataset类 2.2 下载文件 2.3 get_dataset 2.4 get_trajectories trajectory_split暂时略去 # save the test dictionary and the true l…

redis核心数据结构源码分析

dictEntry和redisObject 在 Redis 的实现中&#xff0c;当一个键值对被创建并存储时&#xff0c;键通常是一个字符串&#xff0c;而值则是一个 redisObject。因此&#xff0c;在 dictEntry 结构中&#xff0c;key 成员指向的是一个字符串&#xff0c;而 v.val 成员则指向一个 …

45.5【C语言】typedef

目录&#xff1a; *全称 *格式 一般指针 数组指针 函数指针 *细节 *全称 type define 类型&#xff08;重新&#xff09;定义&#xff08;或命名&#xff09;&#xff0c;可简化输入 *格式 1.非指针类型: typedef 类型 简化名称 typedef signed long long k; signed long …

搭建自己的金融数据源和量化分析平台(七):定时更新上市公司所属行业门类及大类

0x00 前言 由于此前从深交所下载的股票信息中只有行业门类信息&#xff0c;没有行业大类信息&#xff0c;导致后续解析三大报表和量化选股的时候无法进行&#xff1a; 可以看到深交所的股票是没有大类信息的。 再看看上交所的保险股&#xff1a; 因此需要将深交所股票的所属…

WIFI驱动开发

Linux 4.9 内核驱动移植 Linux 4.9 BSP 内核驱动 下载驱动后获得驱动的 tar.gz 压缩包 解压后找到如下驱动与文件夹 进入内核&#xff0c;找到 linux-4.9/drivers/net/wireless 文件夹中&#xff0c;新建文件夹aic8800 并且把上面的驱动与文件夹放入刚刚创建好的 aic8800 中。…

【MySQL】 黑马 MySQL进阶 笔记

文章目录 存储引擎MySQL的体系结构存储引擎概念存储引擎特点InnoDBMyISAMMemory 存储引擎选择 索引概述结构B Tree(多路平衡查找树)B TreeHash为什么InnoDB存储引擎选择使用Btree索引结构? 分类思考题 语法SQL性能分析&#xff08;索引相关&#xff09;SQL执行频率慢查询日志p…

SSRF和CSRF实战复现

文章目录 SSRFWeb-Hacking-Lab-master1、Centos未授权访问2、Ubuntu未授权访问3、Ubuntu传入公钥访问4、ssrf_redis_lab_pickle_redis_lab CSRF:windphp SSRF SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。 f…

Unity 波函数坍缩算法随机地图生成

Unity 波函数坍缩算法随机地图生成 波函数波函数基本概念位置空间波函数动量空间波函数两种波函数之间的关系波函数的本征值和本征态波函数坍缩 熵是什么熵作为状态函数时间之箭 实现原理举个例子&#xff1a;2D迷宫地图生成 Unity 如何实现前期准备单元格代码瓦片地图代码波函…

通过建模走出人工智能寒冬

很多人对 GenAI 是否会产生商业影响持怀疑态度&#xff0c;但我认为他们不仅错了&#xff0c;而且犯了 2001 年人们在互联网上犯下的错误。他们认为硅谷的炒作是无稽之谈&#xff0c;因此其背后的想法也是无稽之谈。 这是很危险的&#xff0c;我认为&#xff0c;这比大多数零售…

nacos 使用 docker 单机部署连接 MySQL 数据库并开启鉴权

文章目录 本地部署的配置启用鉴权(未验证) docker部署的配置修改docker 镜像源启用鉴权&#xff0c;必须添加如下环境变量如何生成鉴权的密钥 完整环境变量docker启动命令 本地部署的配置 文件结构 application.properties #配置文件 mysql-schema.sql …

WPS关闭后,进程依然在后台运行的解决办法

问题 wps启动后 在启动wps后&#xff0c;什么都不做&#xff0c;打开进程管理器&#xff0c;发现居然运行了3个wps进程&#xff1a; win10只会显示wps进程&#xff1a; win11显示比较准确&#xff1a; 关闭后 在关闭wps&#xff0c;再去任务管理器查看&#xff0c;发现在…

Python计算机视觉 第3章-图像到图像的映射

Python计算机视觉 第3章-图像到图像的映射 3.1 单应性变换 单应性变换&#xff08;Homography&#xff09;是计算机视觉中非常重要的一种几何变换&#xff0c;它用于将一个平面内的点映射到另一个平面内。具体来说&#xff0c;单应性变换可以描述一个图像在摄像机视角变化、…

vue3+vite+axios+mock从接口获取模拟数据实战

文章目录 一、安装相关组件二、在vite.config.js中配置vite-plugin-mock插件三、实现mock服务四、调用api接口请求mock数据方法一、直接使用axios 请求mock 数据方法二、对axios进行封装统一请求mock数据 五、实际运行效果 在用Vue.js开发前端应用时通常要与后端服务进行交互&a…

白酒与家庭聚会:温馨与和谐的时光

在繁忙的都市生活中&#xff0c;家庭聚会是每个人心中那份较温暖的港湾。每当夜幕降临&#xff0c;灯火通明&#xff0c;家人们围坐在一起&#xff0c;谈笑风生&#xff0c;那份温馨与和谐仿佛能够驱散一切疲惫。而在这个温馨的时刻&#xff0c;白酒——豪迈白酒&#xff08;HO…

Python 爬虫入门(十二):正则表达式「详细介绍」

Python 爬虫入门&#xff08;十二&#xff09;&#xff1a;正则表达式 前言一、正则表达式的用途二、正则表达式的基本组成元素2.1 特殊字符2.2 量词2.3 位置锚点2.4 断言2.5 字符集2.6 字符类2.6.1 基本字符类2.6.2 常见字符类简写2.6.3 POSIX字符类2.6.4 组合使用 三、 正则表…

如何使用ssm实现亿互游在线平台设计与开发+vue

TOC ssm118亿互游在线平台设计与开发vue 绪论 1.1研究背景 时代的发展&#xff0c;我们迎来了数字化信息时代&#xff0c;它正在渐渐的改变着人们的工作、学习以及娱乐方式。计算机网络&#xff0c;Internet扮演着越来越重要的角色&#xff0c;人们已经离不开网络了&#x…

2024世界机器人大会盛大开幕,卓翼飞思携无人智能领域产品集中亮相 !

开放创新 聚享未来&#xff01;万众瞩目的2024世界机器人大会暨博览会于8月21日在北京亦创国际会展中心盛大开幕。大会聚焦机器人技术与产业前沿趋势&#xff0c;展示机器人创新应用赋能千行百业的多元场景&#xff0c;全球顶尖的机器人科学家、行业领袖、创新精英汇聚一堂&…

使用HAL库实现按键控制LED和蜂鸣器

下载STM32CubeMX实现项目的初始配置&#xff08;寄存器操作)&#xff0c;下载keil对程序进行编译烧写 在STM32CubeMX中将PB0/PB1设置为输入引脚作为按键&#xff0c;PA6/PA4设置为输出引脚作为led和Beep&#xff0c;将按键引脚设置为上拉输入&#xff1a; 创建项目完成后在kei…