当前位置: 首页 > news >正文

React+Antd实现省、市区级联下拉多选组件(支持只选省不选市)

 1、效果

是你要的效果,咱们继续往下看,搜索面板实现省市区下拉,原本有antd的Cascader组件,但是级联组件必须选到子节点,不能只选省,满足不了页面的需求

2、环境准备

1、react18

2、antd 4+

3、功能实现

原理:封装一个受控组件,该组件就是两select基本组件

1、首先,导入需要的组件:

import { Select, Space, Tag } from 'antd';

 2、定义2个状态变量来存储选中省和市的下拉枚举

  const [firstOptions, setFirstOptions] = useState<any>([]);const [secondOptions, setSecondOptions] = useState<any>([]);

 3、组件可接收的props子属性 如下:

  •  options: 省市级联数据
  •  value: 已选中的值
  •  width:slect框的宽度
  •  firstPlaceholder 第一个select框的placeholder
  • secondPlaceholder第二个select框的placeholder
  •  onChange: 选中的值发生变化时回调

 4、创建handleFirstChange函数来处理第一个select框的change事件,更新第二个select框的下拉项和值

  // 第一个select生变化const handleFirstChange = (data: any) => {if (!isEmpty(data) && data.value) {let insertIndex = (options || []).findIndex((item: any) => {return item?.value === data?.value;});setSecondOptions(options?.[insertIndex]?.children || []);onChange({ first: [data] });} else {setSecondOptions([]);onChange(null);}};

 5、创建onSecondChange 函数来处理第二个select框的change事件,将选中的值回传给父组件

  // 第二个select发生变化const onSecondChange = (data: any) => {if (!isEmpty(value) && value.first) {if (!isEmpty(data)) {onChange({...value,second: mode === 'multiple' ? (data || []).filter((item: any) => !isNil(item?.label)) : [data],});} else {onChange({ first: value.first, second: null });}} else {onChange(null);}};

 6、最后,使用2个select组件渲染,并将选中状态和change事件绑定到对应的属性上:

return (<><Space wrap={false} direction="horizontal" size={12}><SelectdefaultValue={firstOptions[0]}style={{ width: width }}onChange={handleFirstChange}placeholder={firstPlaceholder || '请选择'}value={value?.first}options={firstOptions}labelInValueallowClear/><Selectstyle={{ width: width }}value={value?.second || []}onChange={onSecondChange}placeholder={secondPlaceholder || '请选择'}options={secondOptions}{...mode === "multiple" ? { mode: "multiple", maxTagCount: 'responsive', tagRender: tagRender } : {}}labelInValueallowClear/></Space></>
)

 7、完整代码如下:

import { Select, Space, Tag } from 'antd';
import clsx from 'clsx';
import { isEmpty, isNil } from 'lodash';
import { useEffect, useState } from 'react';
import './index.less';const MultipleCascaderSelect = (props: any) => {const {options,value,onChange,width = 160,firstPlaceholder,secondPlaceholder,mode = 'multiple'} = props;const [firstOptions, setFirstOptions] = useState<any>([]);const [secondOptions, setSecondOptions] = useState<any>();useEffect(() => {setFirstOptions(options || []);if (Array.isArray(value?.first) && value.first.length) {let findIndex = (options || []).findIndex((item: any) => {return item.value === value.first?.[0].value;});setSecondOptions(options[findIndex]?.children || []);} else {setSecondOptions([]);}}, [options, value]);// 第一个select生变化const handleFirstChange = (data: any) => {if (!isEmpty(data) && data.value) {let insertIndex = (options || []).findIndex((item: any) => {return item?.value === data?.value;});setSecondOptions(options?.[insertIndex]?.children || []);onChange({ first: [data] });} else {setSecondOptions([]);onChange(null);}};// 第二个select发生变化const onSecondChange = (data: any) => {if (!isEmpty(value) && value.first) {if (!isEmpty(data)) {onChange({...value,second: mode === 'multiple' ? (data || []).filter((item: any) => !isNil(item?.label)) : [data],});} else {onChange({ first: value.first, second: null });}} else {onChange(null);}};const tagRender = ({ label, closable, onClose }: any) => {const isLongTag = `${label}`.length > 4;return (<Tagcolor={label.props?.color}closable={closable}onClose={onClose}className={clsx(['text-sky-400 bg-sky-400/10 text-sm font-normal leading-5',// 'border border-solid border-sky-400/50','max-w-[110px] border-none',// 'whitespace-nowrap text-ellipsis overflow-hidden'])}><span>{isLongTag ? `${label.slice(0, 4)}...` : label}</span>{/* {isLongTag ? (<Tooltiptitle={label}key={label}rootClassName={clsx('toolTipCard')}placement="top"><span>{label.slice(0, 4)}...</span></Tooltip>) : (<span>{label}</span>)} */}</Tag>);};return (<><Space wrap={false} direction="horizontal" size={12}><SelectdefaultValue={firstOptions[0]}style={{ width: width }}onChange={handleFirstChange}placeholder={firstPlaceholder || '请选择'}value={value?.first}options={firstOptions}labelInValueallowClear/><Selectstyle={{ width: width }}value={value?.second || []}onChange={onSecondChange}placeholder={secondPlaceholder || '请选择'}options={secondOptions}{...mode === "multiple" ? { mode: "multiple", maxTagCount: 'responsive', tagRender: tagRender } : {}}labelInValueallowClear/></Space></>);
};export default MultipleCascaderSelect;

组件调用

 <MultipleCascaderSelectwidth={162}options={enumData|| []}firstPlaceholder="请选择"secondPlaceholder="请选择"/>

相关文章:

React+Antd实现省、市区级联下拉多选组件(支持只选省不选市)

1、效果 是你要的效果&#xff0c;咱们继续往下看&#xff0c;搜索面板实现省市区下拉&#xff0c;原本有antd的Cascader组件&#xff0c;但是级联组件必须选到子节点&#xff0c;不能只选省&#xff0c;满足不了页面的需求 2、环境准备 1、react18 2、antd 4 3、功能实现 …...

CentOS镜像如何下载?在VMware中如何安装?

一、问题 CentOS镜像如何下载&#xff1f;在VMware中如何安装&#xff1f; 二、解决 1、CentOS镜像的下载 &#xff08;1&#xff09;官方网站 The CentOS Project &#xff08;2&#xff09;官方中文官网 CentOS 中文 官网 &#xff08;3&#xff09;选择CentOS Linux…...

计算机科学导论(4)DMA传输原理

文章目录 DMA的工作原理DMA的优势DMA的类型DMA的应用 DMA&#xff08;Direct Memory Access&#xff09;直接内存访问是一种允许某些硬件子系统在不通过中央处理单元&#xff08;CPU&#xff09;的情况下&#xff0c;直接从内存读取或向内存写入数据的技术。这种方式可以显著提…...

select、poll和epoll的区别

文章目录 概要一、多路复用I/O模型的诞生1.1 多线程或进程方式1.2 通过数组&#xff0c;链表等方式保存socket fd&#xff0c;不断轮询 二、select三、poll四、epoll五、小结六、参考 概要 在Unix五种I/O模型一文中&#xff0c;提到了I/O多路复用模型&#xff0c;其在Linux下有…...

gpt今日最新新闻:gpts的广泛应用

最近&#xff0c;OpenAI给ChatGPT带来了一个备受期待的更新——“GPT提及&#xff08;mentions&#xff09;”功能。这项创新不仅增强了ChatGPT的实用性&#xff0c;也为AI在日常业务中的运用开辟了新路径。在本文中&#xff0c;我将分享我对这项新功能的初步体验&#xff0c;并…...

【进入游戏行业选游戏特效还是技术美术?】

进入游戏行业选游戏特效还是技术美术&#xff1f; 游戏行业正处于蓬勃发展的黄金时期&#xff0c;科技的进步推动了游戏技术和视觉艺术的飞速革新。在这个创意和技术挑战交织的领域里&#xff0c;游戏特效和技术美术岗位成为了许多人追求的职业目标。 这两个岗位虽然紧密关联…...

(delphi11最新学习资料) Object Pascal 学习笔记---第4章第2.3节(常量参数)

4.2.3 常量参数 ​ 作为引用参数的替代&#xff0c;您可以使用const参数。由于您无法在例程内为const参数赋予新值&#xff0c;因此编译器可以优化参数传递。编译器可以选择与引用参数相似的方法&#xff08;或者在C术语中是const引用&#xff09;&#xff0c;但行为类似于值参…...

事件在状态流程图中的工作方式

什么是事件&#xff1f; 事件是一个Stateflow对象&#xff0c;它可以触发以下对象中一个动作&#xff1a; Simulink触发子系统 Simulink函数调用子系统 状态流程图 何时使用事件 当你想&#xff1a; 激活Simulink触发的子系统 激活Simulink函数调用子系统 在状态流程图…...

幻兽帕鲁能在Mac上运行吗?幻兽帕鲁Palworld新手攻略

幻兽帕鲁能在Mac上运行吗&#xff1f; 《幻兽帕鲁》目前还未正式登陆Mac平台&#xff0c;不过通过一些方法是可以让游戏在该平台运行的。 虽然游戏不能在最高配置下运行&#xff0c;但如果你安装了CrossOver这个软件&#xff0c;就可以玩了。这是为Mac、Linux和ChromeOS等设计…...

elementPlus实现动态表格单元格合并span-method方法总结

最近在做PC端需求的时候&#xff0c;需要把首列中相邻的同名称单元格合并。 我看了一下elementPlus官网中的table表格&#xff0c;span-method可以实现单元格合并。 我们先看一下官网的例子&#xff1a; 合并行或列 多行或多列共用一个数据时&#xff0c;可以合并行或列。 …...

视频上传 - 断点续传那点事

在上一篇文章中&#xff0c;我们讲解了分片上传的实现方式。在讲解断点续传之前&#xff0c;我要把上篇文章中留下的问题讲解一下。读过上一篇文章的小伙伴们都知道&#xff0c;对于分片上传来说&#xff0c;它的传输方式分为2种&#xff0c;一种是按顺序传输&#xff0c;一种是…...

Scala 和 Java在继承机制方面的区别

Scala 和 Java 都是面向对象编程语言&#xff0c;都支持类的继承机制。然而&#xff0c;尽管两者在基础概念上有很多相似之处&#xff0c;但在具体的实现和语法上&#xff0c;Scala 的继承机制有其独特之处。以下是 Scala 和 Java 在继承方面的一些主要区别&#xff1a; 多重继…...

spark sql上线前的调试工作实现

背景 每个公司应该都有大数据的平台的吧&#xff0c;平台的作用就是可以在上面执行各种spark sql以及定时任务&#xff0c;不过一般来说&#xff0c;由于这些spark sql的上线不经过测试&#xff0c;所以可能会影响到生产的数据&#xff0c;这种情况下大数据平台提供一个上线前…...

java -jar启动SpringBoot项目时配置文件加载位置与优先级

服务部署启动时,我们经常需要指定配置文件启动. 一般有四种,优先级如下 spring.config.location > spring.profiles.active > spring.config.additional-location > 默认的 application.yml 1.spring.config.location 外部配置文件优先级最高 一般配置文件在服务…...

每日一题 力扣LCP30.魔塔游戏

题目描述&#xff1a; 小扣当前位于魔塔游戏第一层&#xff0c;共有 N 个房间&#xff0c;编号为 0 ~ N-1。每个房间的补血道具/怪物对于血量影响记于数组 nums&#xff0c;其中正数表示道具补血数值&#xff0c;即血量增加对应数值&#xff1b;负数表示怪物造成伤害值&#x…...

iPhone搞机记录

-iPhone 8 或以上 设备进入DFU模式的方法&#xff1a; &#xff08;适用&#xff1a;iPhone 8/8 Plus、iPhone X 系列、iPad Pro3 (11-inch)/(12.9-inch)&#xff09; 1.保持设备处于开机或恢复模式下&#xff0c;插入数据线。 2.按一次设备的“音量加键”松开、再按一次“音量…...

Linux中共享内存(mmap函数的使用)

内存映射的基本使用 内存映射 概念&#xff1a; 使一个磁盘文件与内存中的一个缓冲区相映射&#xff0c;进程可以像访问普通内存一样对文件进行访问&#xff0c;不必再调用read,write。 mmap()的优点&#xff1a; 实现了用户空间和内核空间的高效交互方式 优化前&#xff1a;优…...

Golang与Erlang有什么差异

Golang和Erlang是两种备受关注的编程语言&#xff0c;它们各自具有独特的特点和优势。下面我将简单的探讨一下Golang和Erlang之间的差异&#xff0c;并且分析它们在并发模型、运行环境、函数式编程和领域特性等多个方面的不同之处。 并发模型 Golang使用goroutines和channels…...

cesium系列篇:Entity vs Primitive 源码解析(从Entity到Primitive)02

上篇文章中&#xff0c;我们介绍了使用viewer.entities.add添加entity之后的信号传递以及最后entity对象被传递到GeometryVisualizer&#xff1b; 这篇文章&#xff0c;我们则介绍如何在逐帧渲染的过程中根据GeometryVisualizer中的entity对象创建相应的primitive 这是下文中…...

golang windows 环境搭建 环境配置

golang windows 环境搭建 环境配置 Golang学习之路一环境搭建 MacBook Linux 树莓派raspberrypi安装Golang环境 官网下载地址: https://go.dev/dl/ https://golang.google.cn/dl/ 下载对应系统版本&#xff0c;例如windows 64位系统&#xff0c;下载&#xff1a;xxx.window…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...

用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

Linux中INADDR_ANY详解

在Linux网络编程中&#xff0c;INADDR_ANY 是一个特殊的IPv4地址常量&#xff08;定义在 <netinet/in.h> 头文件中&#xff09;&#xff0c;用于表示绑定到所有可用网络接口的地址。它是服务器程序中的常见用法&#xff0c;允许套接字监听所有本地IP地址上的连接请求。 关…...

java 局域网 rtsp 取流 WebSocket 推送到前端显示 低延迟

众所周知 摄像头取流推流显示前端延迟大 传统方法是服务器取摄像头的rtsp流 然后客户端连服务器 中转多了&#xff0c;延迟一定不小。 假设相机没有专网 公网 1相机自带推流 直接推送到云服务器 然后客户端拉去 2相机只有rtsp &#xff0c;边缘服务器拉流推送到云服务器 …...

NamedParameterJdbcTemplate 使用方法及介绍

NamedParameterJdbcTemplate是 Spring 框架中用于数据库操作的核心类之一&#xff0c;它拓展了JdbcTemplate&#xff0c;通过封装实现命名参数特性&#xff0c;相比传统占位符?&#xff0c;命名参数可读性和维护性更强&#xff0c;能有效避免参数顺序混淆问题。 一、核心支持…...