当前位置: 首页 > 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…...

毫米波雷达信号处理入门:用MATLAB解析DCA1000采集的IWR6843原始数据(附代码)

毫米波雷达信号处理实战&#xff1a;从原始数据到距离谱的MATLAB实现 在自动驾驶和智能感知领域&#xff0c;毫米波雷达因其全天候工作能力和精确的距离测量特性&#xff0c;成为不可或缺的传感器。当开发者完成硬件配置和数据采集后&#xff0c;面对adc_data.bin这样的原始数据…...

别再为模糊监控头疼了!手把手教你用SRGAN+ResNet101搞定低清行人重识别

低清监控下的行人重识别实战&#xff1a;SRGAN与ResNet101的工程化融合方案 清晨的地铁站&#xff0c;监控摄像头捕捉到一个模糊的身影——黑色外套、深色背包&#xff0c;像素化的面部特征让传统识别系统束手无策。这正是当下安防领域最棘手的现实挑战&#xff1a;如何从低分辨…...

把 SAP Fiori 远程系统配置讲透:SM59、System Alias、sap-system 与多后端路由实践

在 SAP Fiori launchpad 的真实项目里,用户登录的系统,和应用实际运行、实际取数的系统,往往并不是同一台机器。很多团队在做 PoC 的时候,一切看起来都很顺;一旦进入企业级部署,前端服务器、Gateway、ECC、S/4HANA、SRM 甚至多个区域性后端同时出现,导航失败、取数跑偏、…...

Cesium实战:手把手教你实现智慧城市中的动态流动线(附完整代码与避坑指南)

Cesium实战&#xff1a;打造智慧城市动态流动线的完整技术方案 在数字孪生和智慧城市可视化项目中&#xff0c;动态流动线是实现交通流、管网流向等动态效果的关键元素。本文将深入探讨如何基于Cesium引擎&#xff0c;从Shader编写到前端集成&#xff0c;构建高性能的动态线可视…...

别再死记硬背了!用‘神经元工作原理’理解你背单词为什么总忘

别再死记硬背了&#xff01;用‘神经元工作原理’理解你背单词为什么总忘 背单词时总是前脚记后脚忘&#xff1f;这其实不是记忆力的问题&#xff0c;而是方法的问题。我们的大脑就像一台精密的生物计算机&#xff0c;而记忆的形成和巩固遵循着特定的神经科学规律。理解这些规…...

低成本AI助手:OpenClaw+百川2-13B-4bits量化模型月消耗实测

低成本AI助手&#xff1a;OpenClaw百川2-13B-4bits量化模型月消耗实测 1. 为什么选择这个组合&#xff1f; 去年底我开始尝试用OpenClaw自动化处理日常办公任务时&#xff0c;很快被高昂的API费用劝退——用GPT-4处理文件整理和邮件分类&#xff0c;每月账单轻松突破200美元。…...

Duix-Avatar全离线数字人创作平台深度指南:从部署到高级应用

Duix-Avatar全离线数字人创作平台深度指南&#xff1a;从部署到高级应用 【免费下载链接】Duix-Avatar 项目地址: https://gitcode.com/GitHub_Trending/he/Duix-Avatar 价值解析&#xff1a;Duix-Avatar的SWOT战略分析 优势(Strengths) 全栈本地化架构&#xff1a;所…...

PyTorch 2.8镜像实操手册:/workspace+/data+/output目录规范使用详解

PyTorch 2.8镜像实操手册&#xff1a;/workspace/data/output目录规范使用详解 1. 镜像环境概述 PyTorch 2.8深度学习镜像基于RTX 4090D 24GB显卡和CUDA 12.4深度优化&#xff0c;专为高性能计算任务设计。这个环境预装了完整的深度学习工具链&#xff0c;从基础框架到加速库…...

DAMOYOLO-S与数据库联动:检测结果实时入库与查询

DAMOYOLO-S与数据库联动&#xff1a;检测结果实时入库与查询 你有没有想过&#xff0c;当AI模型在摄像头前“看到”一个人、一辆车时&#xff0c;这些信息除了在屏幕上显示一下&#xff0c;还能做什么&#xff1f;如果这些“看见”的瞬间——谁、在哪儿、什么时候、有多确定—…...

Ostrakon-VL-8B网络编程实践:构建高可用模型服务的负载均衡架构

Ostrakon-VL-8B网络编程实践&#xff1a;构建高可用模型服务的负载均衡架构 最近在帮几个团队部署Ostrakon-VL-8B这类多模态大模型时&#xff0c;发现一个挺普遍的问题&#xff1a;单个实例跑得好好的&#xff0c;一旦流量上来或者服务时间长了&#xff0c;就容易出状况。要么…...