react antd TreeSelect实现自定义标签

news2024/9/23 9:32:30
 <ProFormTreeSelect
                label="接收对象"
                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>
                            <span
                              className="ant-select-selection-item-remove"
                              onClick={() => {
                                props.onClose();
                              }}
                            >
                              <span className="anticon anticon-close">
                                <CloseOutlined />
                              </span>
                            </span>
                          </span>
                        </div>
                      </div>
                    );
                  },

                  dropdownRender: (originNode: ReactNode) => {
                    return (
                      <div>
                        <Tabs
                          type="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.coloradmin.cn/o/2057310.html

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

相关文章

《通义千问AI落地—中》:前端实现

一、前言 本文源自微博客且已获授权,请尊重版权. 书接上文&#xff0c;上文中&#xff0c;我们介绍了通义千问AI落地的后端接口。那么&#xff0c;接下来我们将继续介绍前端如何调用接口以及最后的效果&#xff1b;首先看效果&#xff1a; 上述就是落地到本微博客以后的页面效果…

三角形最小路径和[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个三角形triangle&#xff0c;找出自顶向下的最小路径和。 每一步只能移动到下一行中相邻的结点上。相邻的结点 在这里指的是 下标 与 上一层结点下标 相同或者等于 上一层结点下标 1 的两个结点。也就是说&#xff0c;如果…

代码随想录 day 49 单调栈

第十章 单调栈part02 42. 接雨水 接雨水这道题目是 面试中特别高频的一道题&#xff0c;也是单调栈 应用的题目&#xff0c;大家好好做做。 建议是掌握 双指针 和单调栈&#xff0c;因为在面试中 写出单调栈可能 有点难度&#xff0c;但双指针思路更直接一些。 在时间紧张的情…

深入探讨 Nginx:安装、配置及优化指南

一、Nginx 概述及编译安装 1、概述 Nginx是一个高性能的开源HTTP和反向代理服务器&#xff0c;同时也是一个IMAP/POP3邮件代理服务器。它最初由Igor Sysoev于2002年开发&#xff0c;并于2004年首次发布。Nginx以其高并发性、低资源消耗和灵活的配置能力而受到广泛关注&#x…

卡码网KamaCoder 105. 有向图的完全可达性

题目来源&#xff1a;105. 有向图的完全可达性 C题解1&#xff1a; #include <iostream> #include <vector> #include <algorithm>using namespace std;int main(){int N, K;cin>>N>>K;// 如果边的数量不够&#xff0c;则一定不能到达所有点if…

使用Harbor搭建Docker私有仓库

一、harbor&#xff1a;开源的企业级的docker仓库软件&#xff0c;仓库就是保持镜像的。 1.仓库分两种&#xff1a;私有仓库&#xff1a;运维用的最多 公有仓库 2.harbor是有图形化的&#xff0c;页面UI展示的一个工具&#xff0c;操作直观 3.注意点&#xff1a;harbor都是由…

拖拽式报表设计器优点好 实现流程化办公就靠它!

当前&#xff0c;实现流程化办公是很多企业都想要实现的目标。利用低代码技术平台、拖拽式报表设计器的优势特点&#xff0c;可以为企业降低开发成本、提升办公效率、创造更多市场价值。那么&#xff0c;您知道拖拽式报表设计器的优点是什么吗&#xff1f;通过本文一起了解拖拽…

疫情期间我面试了13家企业软件测试岗位,一些面试题整理

项目的测试流程 拿到需求文档后&#xff0c;写测试用例 审核测试用例 等待开发包 部署测试环境 冒烟测试&#xff08;网页架构图&#xff09; 页面初始化测试&#xff08;查看数据库中的数据内容和页面展示的内容是否一致&#xff0c;并且是否按照某些顺序排列&#xff09…

JavaScript_9_练习:随机点名

效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>练习&#xff1a;随机点名</title&g…

C语言中的预处理详解

1. 预定义符号 C语⾔设置了⼀些预定义符号&#xff0c;可以直接使⽤&#xff0c;预定义符号也是在预处理期间处理的。 举个例⼦&#xff1a; printf("file:%s line:%d\n", __FILE__, __LINE__); 2. #define 定义常量 基本语法&#xff1a; #define name stuff 举个例…

桥接模式详解

桥接模式 概念: 将抽象部分和实现部分分离, 使他们都可以独立的变化 概念很抽象, 难以理解, 我们举个例子 例子 设想三种不同品牌的汽车 大车 中车 小车 三种不同类型的引擎 纯电引擎 混动引擎 燃油引擎 如果我们把他们两两组合, 都继承同一个类的话,就会有9个类, 并且如果后…

vue的i18n国际化

一、介绍 i18n 是国际化和本地化&#xff08;Internationalization and Localization&#xff09;的缩写&#xff0c;其中 “i” 和 “n” 分别代表单词的首尾字母&#xff0c;而 “18” 代表中间的字母数。这个术语用于描述软件应用程序支持多种语言和地区设置的过程。 1、国…

调和级数详解

调和级数的来历 早在14世纪,尼克尔奥里斯姆已经证明调和级数发散,但知道的人不多。17世纪时,皮耶特罗曼戈里、约翰伯努利和雅各布伯努利完成了全部证明工作。 调和序列历来很受建筑师重视;这一点在巴洛克时期尤其明显。当时建筑师在建造教堂和宫殿时,运用调和序列为楼面…

怎样把经典CAD工具栏调出来

阅读更多cad如何显示工具栏&#xff1f;教你三个方法快速调出

ELFK基础搭建流程及在SpringBoot项目中进行日志采集的简单实践

目录 一、前言 二、ELK简介 三、ELK常见的几种架构 四、Docker安装ELFK的详细流程 4.1环境说明。 4.2ElasticSearch搭建 配置ElasticSearch 启动ElasticSearch 4.3Kibana搭建 配置kibana 启动kibana 4.4LogStash搭建 配置LogStash 启动LogStash 4.5Filebeat搭建 …

Elasticsearch之RestClient的简单操作(附java代码案例)

目录 前言 1. 案例Demo前期准备 1.1 sql数据 1.2 项目结构 1.3 mapping映射分析 1.4 初始化RestClient 2.索引库操作 2.1 创建索引库 2.1.1 代码解读 2.1.2 完整代码示例 2.2 判断索引库是否存在 2.3 删除索引库操作 2.4 索引库操作总结 3.RestClient操作文档 3.…

什么是逃逸分析

如何快速判断是否逃逸就看方法内new的对象实体是否能够被外部方法进行调用 什么是逃逸分析 在java虚拟机中&#xff0c;对象是在java堆中分配内存的&#xff0c;这是一个普遍的常识。但是&#xff0c;有一种特殊情况&#xff0c;那就是如果经过逃逸分析&#xff08;escape an…

nvidia系列教程-AGX-Orin can接口调试

目录 前言 一、AGX-Orin can介绍 二、原理图连接 三、系统配置 四、can数据收发 总结​​​​​​​ 前言 NVIDIA Jetson AGX Orin 是一款高性能的嵌入式平台,专为自动驾驶、机器人、物联网和其他需要大量计算能力和人工智能处理的应用设计。Jetson AGX Orin 集成了多个 …

【原创】java+swing+mysql客户信息管理系统设计与实现

个人主页&#xff1a;程序员杨工 个人简介&#xff1a;从事软件开发多年&#xff0c;前后端均有涉猎&#xff0c;具有丰富的开发经验 博客内容&#xff1a;全栈开发&#xff0c;分享Java、Python、Php、小程序、前后端、数据库经验和实战 文末有本人名片&#xff0c;希望和大家…

【xilinx】Versal Adaptive SoC DDRMC - NoC QoS 选项卡未出现

在 2024.1 之前的 Vivado 版本中&#xff0c;用户在使用 NoC 验证块设计时可以访问 NoC 对象窗口和 QoS 选项卡。 Vivado 2024.1 中存在一个已知问题&#xff0c;即 NoC 对象窗口和 QoS 选项卡不出现。 要显示 NoC 对象窗口和 QoS 选项卡&#xff0c;请保存块设计&#xff0c;…