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

榴莲lua

已于 2022-06-22 11:15:48 修改

阅读量5.2k

点赞数 5

分类专栏： react antd design 文章标签： react.js typescript es6

于 2021-11-12 16:59:10 首次发布

本文链接：https://blog.csdn.net/weixin_41458007/article/details/121291444

版权

本文介绍了如何基于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&