基于antd Cascader组件 自定义一个支持父级单选,子级多选的组件

本文介绍了如何基于Ant Design的Cascader组件封装一个特殊功能的组件,实现一级菜单单选,二级菜单多选的效果。在实现过程中,由于Antd的Cascader组件默认不支持这种行为,作者通过自己的方式解决了这个问题,并在后续的Antd更新中进行了适配。文章还提供了一级选中后的效果描述和组件的引用示例,同时分享了选项数据结构的要求。
摘要由CSDN通过智能技术生成

需要一个支持多选的组件,且一级单选,二级多选,ant现有组件满足不了需求,自己写了一个。 第一期做了一个但是ant的Cascader组件multiple不支持多选(不知道是不是版本问题),后面ant官方加上multiple生效我的这个方法就报错了,后面自己又在原来的基础上改了一下
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

一级选中后,除选中项,其他项都disabled,但是二级可多选。
封装的子组件

import React,{useState,useEffect} from "react";
import PropTypes from "prop-types";
import { get, isEmpty, reduce, includes, filter } from "lodash";
import { Cascader, Tag } from "antd";
import './index.less'

const CascaderMul = (props) => {
  const {labels,value,onChange,style}=props
  // 根据数据拿到code的组合
  let options;
  if(value&&value.length>0){ //选中一个行业后 其他的行业disabled 不允许选
    const currentId=value.length>0&
  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值