ReactJS UI Ant Design Cascader 组件

Ant Design Cascader是Ant Design React UI框架中的一个组件，它提供了类似于级联选择器的UI元素，可以用于选择层次结构数据。Cascader支持单选和多选模式，也可以自定义选项卡和筛选器。此外，它还提供了更高级的功能，例如远程加载选项，从输入框中进行搜索，动态改变选项等。

特性

• 支持单选和多选模式。
• 可以自定义选项卡和筛选器。
• 支持远程加载选项。
• 支持从输入框中进行搜索。
• 可以动态改变选项。

使用示例

import { Cascader } from 'antd';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

function onChange(value) {
  console.log(value);
}

ReactDOM.render(
  <Cascader options={options} onChange={onChange} placeholder="Please select" />,
  mountNode,
);

API

Ant Design Cascader提供了丰富的API，可以让您自定义Cascader的行为和外观。

Cascader

| 参数 | 说明 | 类型 | 默认值 | | -------------- | ------------------------------------------ | ----------------------------- | ---------- | | allowClear | 是否支持清除 | boolean | true | | autoFocus | 是否默认获取焦点 | boolean | false | | changeOnSelect | 是否允许只选中父节点 | boolean | false | | className | 自定义类名前缀 | string | ‘ant-cascader’ | | defaultValue | 默认的选中项 | string[] | [] | | disabled | 是否禁用 | boolean | false | | expandIcon | 自定义的展开图标 | ReactNode | - | | fieldNames | 自定义显示的字段名 | CascaderFieldNames | {label: 'label', value: 'value', children: 'children'} | | getPopupContainer | 菜单渲染父节点，默认渲染到 body 上，可选渲染到别的节点 | Function(triggerNode) => HTMLElement | () => document.body | | loadMore | 动态加载数据的方法，用于异步加载选项 | Promise => options | - | | notFoundContent | 无匹配选项时的内容 | string | 'Not Found' | | onChange | 选中项变化回调函数 | (value, selectedOptions) => void | - | | onPopupVisibleChange | 下拉框是否可见的回调 | function | 无 | | options | 可选项数据源 | CascaderOption[] or Function(inputValue: string, path: CascaderOption[]) => CascaderOption[] | [] | | placeholder | 选择框默认文字 | string | - | | popupClassName | 自定义浮层类名 | string | - | | popupPlacement | 浮层预设位置：bottomLeft bottomRight topLeft topRight | Enum {'bottomLeft', 'bottomRight', 'topLeft', 'topRight'} | ‘bottomLeft’ | | popupVisible | 是否显示下拉框 | boolean | - | | style | 自定义内联样式 | object | - | | suffixIcon | 自定义的后缀图标 | ReactNode | - | | value | 指定选中项 | string[] | - | | changeOnSelect | 是否允许只选中父节点 | boolean | false |

Cascader.Option

通过配置 Cascader.Option，可以自定义选项容器的属性和样式。Cascader.Option 继承自PopconfirmOption 的 API，可以使用 PopconfirmOption 的所有属性。

CascaderFieldNames

CascaderFieldNames 对象用于自定义需要显示的字段名。

• label: 指定选项标签名的属性名。
• value: 指定选项值的属性名。
• children: 指定选项子节点的属性名。

{
  label: 'address',
  value: 'value',
  children: 'children',
}

参考文献

• Ant Design Cascader

完整示例

请参阅Cascader - Ant Design官方文档。