React Antd Cascader 组件「级联选择框」实战使用总结（一）

zoe_ya

已于 2023-05-28 22:31:00 修改

阅读量1.7k

点赞数

文章标签：前端 javascript html5 typescript antd

于 2023-05-08 19:29:28 首次发布

本文链接：https://blog.csdn.net/Constantiny/article/details/130561498

版权

Cascader 级联选择框

在这里插入图片描述

何时使用

需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

类型

interface Option {
  value: string;
  label: string;
  children?: Option[];
}

TypeScript 的一个问题

触发条件
- props: CascaderProps<any>
- 设置 multiple 复选

就会报错

报错

import { useMemo } from 'react';
import { Cascader, CascaderProps } from 'antd';
import { useModel } from 'umi';

interface Option {
  value: string | number;
  label: string;
  children?: Option[];
}

const CascaderSelect = (props: CascaderProps<any>) => {
 ...
 ...
 ...
  return (
    <Cascader
      placeholder="请选择"
      options={options || []}
      multiple
      allowClear
      {...props}
    />
  );
};
export default XXXCascaderSelect;

猜测

看源码
SingleCascaderProps.ts

export { BaseOptionType, DefaultOptionType };
export declare type FieldNamesType = FieldNames;
export declare type FilledFieldNamesType = Required<FieldNamesType>;
declare const SHOW_CHILD: "SHOW_CHILD", SHOW_PARENT: "SHOW_PARENT";
declare type SingleCascaderProps = Omit<RcSingleCascaderProps, 'checkable' | 'options'> & {
    multiple?: false;
};
declare type MultipleCascaderProps = Omit<RcMultipleCascaderProps, 'checkable' | 'options'> & {
    multiple: true;
};
declare type UnionCascaderProps = SingleCascaderProps | MultipleCascaderProps;
export declare type CascaderProps<DataNodeType> = UnionCascaderProps & {
    multiple?: boolean;
    size?: SizeType;
    disabled?: boolean;
    bordered?: boolean;
    placement?: SelectCommonPlacement;
    suffixIcon?: React.ReactNode;
    options?: DataNodeType[];
    status?: InputStatus;
    /**
     * @deprecated `dropdownClassName` is deprecated which will be removed in next major
     *   version.Please use `popupClassName` instead.
     */
    dropdownClassName?: string;
};
export interface CascaderRef {
    focus: () => void;
    blur: () => void;
}
declare const Cascader: (<OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: React.PropsWithChildren<CascaderProps<OptionType>> & {
    ref?: React.Ref<CascaderRef> | undefined;
}) => React.ReactElement) & {
    displayName: string;
    SHOW_PARENT: typeof SHOW_PARENT;
    SHOW_CHILD: typeof SHOW_CHILD;
};
export default Cascader;

MultipleCascaderProp.ts
在这里插入图片描述

onChange 类型应该是复选但是传单选

其他

Antd 级联框的数据源字段命名必须用他给的

严格符合这个 typescript 接口格式

建议写一个函数专门处理后端接口返回的数据结构转换成下面的样式

由于数据结构带有 children 用递归很好

interface Option {
  value: string | number;
  label: string;
  children?: Option[];
}

例子：

const flatToTree = (data?: any[]): any => {
    const formattedDepartment = data?.map(
      ({ name, id, children }) => ({
        label: name,
        value: id,
        children: flatToTree(children),
      }),
    );
    return formattedDepartment;
  }