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.rhkb.cn/news/408532.html

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

相关文章

探索条形码与二维码的秘密:pyzbar库的神奇之旅

文章目录 探索条形码与二维码的秘密&#xff1a;pyzbar库的神奇之旅背景&#xff1a;为什么选择pyzbar&#xff1f;pyzbar是什么&#xff1f;如何安装pyzbar&#xff1f;简单库函数使用方法场景应用常见Bug及解决方案总结 探索条形码与二维码的秘密&#xff1a;pyzbar库的神奇之…

数字化与进制转换

1.数字化是什么&#xff1f; 数字化是将事物的属性转化为计算机可处理对象的过程。 2.数字化的好处&#xff1f; 可以让我们的生活&#xff0c;学习和工作更加便捷&#xff0c;大大提升我们学习和工作的效率。 3.如何将采集到的数据进行数字化&#xff1f; 可以通过两种信…

爬取央视热榜并存储到MongoDB

1. 环境准备 在开始之前&#xff0c;确保你已经安装了以下Python库&#xff1a; pip install requests pymongo2. 爬取网页内容 首先&#xff0c;我们需要爬取央视热榜的网页内容。通过requests.get()方法&#xff0c;我们可以获取网页的HTML内容&#xff0c;并通过re.finda…

Linux--gdb的常用命令

目录 前言 一、gdb是什么&#xff1f; 二、常用命令 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 对于程序有两个版本&#xff0c;一个是debug版和release版&#xff0c;要想进行调试必须使用debug版本&#xff0c;再Linux上进行调试就要用到调试器…

实习手记(8):增删改查

上周又偷懒了没有按时写博客&#xff08;扣大分啊啊&#xff01;&#xff09;但是好像也没有人看呢~其实最开始也只是想着记录一下实习历程&#xff0c;怕自己之后回过头想关于实习的都想不起来了&#xff0c;个人还是喜欢记录有关自己的学习生活的&#xff0c;就算没啥人看但回…

Elasticsearch安装 Kibana安装

安装Elasticsearch 一、拉取镜像或者上传 docker pull Elasticsearch 二、将上传的镜像导入(在仓库拉取的这一步跳过) docker load -i es.tar docker load -i 三、创建容器 1.Elasticsearch 注意修改到自己的网络&#xff08;第八行&#xff09; docker run -d \--nam…

ES 支持乐观锁吗?如何实现的?

本篇主要介绍一下Elasticsearch的并发控制和乐观锁的实现原理&#xff0c;列举常见的电商场景&#xff0c;关系型数据库的并发控制、ES的并发控制实践。 并发场景 不论是关系型数据库的应用&#xff0c;还是使用Elasticsearch做搜索加速的场景&#xff0c;只要有数据更新&…

“Docker中部署Kibana:步骤与指南“

博主这篇文章是跟Elasticsearch那篇文章是有关系的&#xff0c;建议大家先去看&#xff1a; 轻松上手&#xff1a;Docker部署Elasticsearch&#xff0c;高效构建搜索引擎环境_docker 启动 es-CSDN博客 这篇博文&#xff0c;还有镜像下载不下来的情况&#xff0c;大家可以去看…

pikachu-ssrf_redis

目录 SSRF 1、SSRF漏洞介绍&#xff1a; 2、SSRF漏洞原理&#xff1a; 3、SSRF漏洞利用手段&#xff1a; 4、SSRF漏洞绕过方法&#xff1a; SSRF(curl)用法 1、通过网址访问链接 2、利用file协议查看本地文件 3、dict协议扫描内网主机开放端口 4.gopher&#xff1a;威…

计算机网络基础 - 应用层(1)

计算机网络基础 应用层网络应用的体系结构C/S 体系结构P2P 体系结构C/S 和 P2P 体系结构的混合体 进程通信概述套接字&#xff08;Socket&#xff09;TCP socketUDP socket 应用层协议应用层需要传输层提供的服务Web 与 HTTP概念非持续连接和持续连接HTTP报文格式请求报文响应报…

vs code中编写html的配置,插件安装

首先安装vs code 插件安装下面三个&#xff1a; 功能分别是&#xff1a; html css support &#xff1a;就是支持html环境&#xff0c;因为vs code就是一个文本编辑器 live server&#xff1a;自动更新编写的文件在浏览器刷新 auto rename tag&#xff1a;自动修改另一半标签…

Postman接口自动化测试:从入门到实践!

前言 在软件开发过程中&#xff0c;接口测试是确保软件各组件之间正确交互的关键环节。Postman作为一款强大的API开发工具&#xff0c;不仅支持接口请求的发送与调试&#xff0c;还提供了丰富的自动化测试功能&#xff0c;使得接口自动化测试变得更加高效和便捷。本文将从Post…

音频采集spring_ws_webrtc (html采集麦克风转gb711并发送广播播放)完整案例

下载地址&#xff1a;http://www.gxcode.top/code 项目说明 springbootwebscoektwebrtc 项目通过前端webrtc采集麦克风声音&#xff0c;通过websocket发送后台&#xff0c;然后处理成g711-alaw字节数据发生给广播UDP并播放。 后台处理项目使用线程池(5个线程)接受webrtc数据并…

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《极端冰雪天气下计及孤岛划分与融合的配电网故障恢复》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

【计算机三级-数据库技术】操作题大题(第八套)

第46题 &#xff08;1&#xff09; 1 (2) create table ( a1 int, a6 int, a10 int, Primary Key(a1, a6), Constraint fk_PerOrders Foreign Key (a1) References T1(a1), Constraint fk_PerOrders Foreign Key (a6) References T3(a6) ) 第47题 答案&#xff1a; [1]Pro…

给Go+Sciter开发的桌面客户端软件添加系统托盘图标

在桌面端软件开发中&#xff0c;系统托盘图标是提升用户体验的重要元素。托盘图标不仅能提供直观的状态反馈&#xff0c;还能让软件在后台运行时依然保持与用户的交互。通过托盘图标&#xff0c;用户可以轻松最小化软件、退出程序&#xff0c;甚至弹出通知&#xff0c;从而避免…

PG数据库导致断电/重启无法正常启动

一、问题 数据库断电后&#xff0c;启动PG数据库后无法正常启动&#xff0c;报”psql: could not connect to server: No such file or directory”的错误&#xff0c;错误图片如下&#xff1a; 二、背景分析 数据库是单机版&#xff0c;使用k8s进行部署运行在指定节点&#…

K8S系列——(二)、K8S部署RocketMQ集群

1、环境准备 要将RocketMQ部署到K8S上&#xff0c;首先你需要提前准备一个K8S集群环境&#xff0c;如图我已经准备好了一个版本为 v1.28.13 的 K8S 集群&#xff08;其他版本也没问题&#xff09;&#xff1a; 角色IPMaster192.168.6.220Node-1192.168.6.221Node-2192.168.6.…

Vue中的methods方法与computed计算属性的区别

在创建的 Vue 应用程序实例中&#xff0c;可以通过 methods 选项定义方法。应用程序实例本身会代理 methods 选项中的所有方法&#xff0c;因此可以像访问 data 数据那样来调用方法。在模板中绑定表达式只能用于简单的运算。如果运算比较复杂&#xff0c;可以使用 Vue.js 提供的…

科技在日常生活中的革新

在科技日新月异的今天&#xff0c;‌我们的生活正经历着前所未有的变革。‌从智能家居到可穿戴设备&#xff0c;‌科技已经渗透到我们生活的每一个角落&#xff0c;‌深刻地影响着我们的生活方式和社会经济的发展。‌ 智能家居系统的出现&#xff0c;‌无疑是科技改变生活的典…