Cascader

何时使用 {#when-to-use}

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

代码演示 {#examples}

<code src="./demo/basic.tsx">基本</code> <code src="./demo/default-value.tsx">默认值</code> <code src="./demo/custom-trigger.tsx">可以自定义显示</code> <code src="./demo/hover.tsx">移入展开</code> <code src="./demo/disabled-option.tsx">禁用选项</code> <code src="./demo/change-on-select.tsx">选择即改变</code> <code src="./demo/multiple.tsx">多选</code> <code src="./demo/showCheckedStrategy.tsx">自定义回填方式</code> <code src="./demo/size.tsx">大小</code> <code src="./demo/custom-render.tsx">自定义已选项</code> <code src="./demo/search.tsx">搜索</code> <code src="./demo/lazy.tsx">动态加载选项</code> <code src="./demo/fields-name.tsx">自定义字段名</code> <code src="./demo/suffix.tsx" version="5.22.0">前后缀</code> <code src="./demo/custom-dropdown.tsx">扩展菜单</code> <code src="./demo/placement.tsx">弹出位置</code> <code src="./demo/variant.tsx" version="5.13.0">形态变体</code> <code src="./demo/status.tsx">自定义状态</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/panel.tsx" version=">= 5.10.0">面板使用</code> <code src="./demo/ellipsis-debug.tsx" debug>菜单项省略样式调试</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/component-token.tsx" debug>Component Token</code>

API

通用属性参考：通用属性

<Cascader options={options} onChange={onChange} />

showSearch

showSearch 为对象时，其中的字段：

Option

interface Option {
  value: string | number;
  label?: React.ReactNode;
  disabled?: boolean;
  children?: Option[];
  // 标记是否为叶子节点，设置了 `loadData` 时有效
  // 设为 `false` 时会强制标记为父节点，即使当前节点没有 children，也会显示展开图标
  isLeaf?: boolean;
}

方法 {#methods}

注意，如果需要获得中国省市区数据，可以参考 china-division。

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

主题变量（Design Token）{#design-token}

<ComponentTokenTable component="Cascader"></ComponentTokenTable>