CascaderPro

长念阅读约 6 分钟1 年前发布

© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

危险

✂️ 当前组件已停止更新维护，如遇问题，需自行修复！

基于 Element React 的 Cascader 组件，结合 DataSet 的一些特性封装的多选组组件。

特性说明

• 理论上支持 Cascader 组件除onChange 的所有属性（对 onChange 做了自定义封装，返回原始数据）

何时使用

• 在表单中需要使用级联选择且需要获取原始数据时使用，其他情况请使用标准组件。

基本用法

import { CascaderPro } from '@/components/element-pro';

export default () => {
  const handleSelectChange = (key: string, value: any, checked: any) => {
    console.log(key, value, checked);
  };

  return (
    <CascaderPro
      options={options || []}
      value={model.address || []}
      onChange={(val, checked) => handleSelectChange('address', val, checked)}
      changeOnSelect
    />
  );
};

API

除此以下附加属性外，支持 Checkbox.Group 默认所有属性。

参数	类型	说明	默认值
options	any[]	必选 用于手动渲染选项数据。请使用 Cascader 标准数据结构（非标准数据请使用 parseDicData 转换）	-
onChange	(value: any, checked?: any) => void	可选 通过 value 匹配返回原始数据 checked	-

源代码

CascaderPro/index.tsx

import { Cascader } from 'element-react';
import { isFunction } from 'lodash-es';

type CascaderProps = React.ComponentProps<typeof Cascader>;

// 把树形数据打平
const flatOptions = (options: any[]) => {
  let result: any[] = [];
  options.forEach((opt) => {
    const { children, ..._opt } = opt;
    result.push(_opt);
    if (children) {
      result = [...result, ...flatOptions(children)];
    }
  });
  return result;
};

export interface CascaderProProps extends Omit<CascaderProps, 'onChange'> {
  onChange?: (val: any, checked: any) => void;
}

const CascaderPro: React.FC<CascaderProProps> = ({
  options,
  props = {
    value: 'value',
    label: 'label',
    children: 'children',
    disabled: 'disabled',
  },
  onChange,
  ...restProps
}) => {
  const { value = 'value' } = props;

  const flattedOptions = React.useMemo(() => flatOptions(options), [options.length]);

  const handleChange = (values) => {
    if (values && values?.length) {
      if (onChange && isFunction(onChange)) {
        // 通过 value 匹配返回原始数据
        const checked = (values || [])?.map((val) =>
          flattedOptions?.find((opt) => opt?.[value] === val)
        );

        onChange(values, checked);
      }
    }
  };

  return <Cascader options={options} props={props} {...restProps} onChange={handleChange} />;
};

export default CascaderPro;

更新日志

alpha

2024-09-13

• 🎉 新增 CascaderPro 组件；