Cascader 多级联动
规则
基础示例
Props 配置示例
可搜索级联选择
多选级联
整段禁用
尺寸对比(小 / 中 / 大)
Events 事件示例
监听选择变化
选择后联动更新
完整配置项:TDesign_Cascader
value:string | number | Array(单选/多选、valueType 不同结构略有差异)
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autofocus | 自动聚焦 | boolean | - | - |
| borderless | 无边框模式 | boolean | false | - |
| checkProps | 透传 Checkbox 属性 | CheckboxProps | - | - |
| checkStrictly | 父子节点选中状态不关联 | boolean | false | - |
| clearable | 是否可清空 | boolean | false | - |
| collapsedItems | 多选折叠项自定义内容 | TNode<{ value; collapsedSelectedItems; count; onClose }> | - | - |
| columnFooter | 每一列底部自定义内容 | TNode<{ panelIndex; options; filteredOptions; onFilter }> | - | - |
| columnHeader | 每一列顶部自定义内容 | TNode<{ panelIndex; options; filteredOptions; onFilter }> | - | - |
| disabled | 是否禁用 | boolean | - | - |
| empty | 无匹配选项时的内容 | string | TNode | - | - |
| filter | 自定义过滤方法 | (filterWords: string, node: TreeNodeModel) => boolean | Promise<boolean> | - | - |
| filterable | 是否可搜索 | boolean | false | - |
| inputProps | 透传 Input 属性 | InputProps | - | - |
| keys | value / label / children / disabled 字段别名 | TreeKeysType | - | - |
| label | 左侧文本 | string | TNode | - | - |
| lazy | 延迟加载子节点 | boolean | true | - |
| load | 加载子树数据(children 为 true 时) | (node: TreeNodeModel) => Promise<Array<CascaderOption>> | - | - |
| loading | 加载状态 | boolean | false | - |
| loadingText | 远程加载提示文字 | string | TNode | - | - |
| max | 多选数量上限(0 不限制) | number | 0 | - |
| minCollapsedNum | 多选折叠阈值(0 不折叠) | number | 0 | - |
| multiple | 是否多选 | boolean | false | - |
| option | 自定义单个级联选项 | TNode<{ item; index; onChange; onExpand }> | - | - |
| options | 可选项数据源 | Array<CascaderOption> | [] | - |
| panelBottomContent | 面板底部内容 | string | TNode | - | - |
| panelTopContent | 面板顶部内容 | string | TNode | - | - |
| placeholder | 占位符 | string | - | - |
| popupProps | 透传 Popup 属性 | PopupProps | - | - |
| popupVisible | 是否显示下拉框 | boolean | - | - |
| defaultPopupVisible | 非受控下拉显隐 | boolean | - | - |
| prefixIcon | 前置图标 | TNode | - | - |
| readonly | 只读(隐藏输入框且无法打开下拉) | boolean | - | - |
| reserveKeyword | 多选可搜索时选中后是否保留关键词 | boolean | true | - |
| selectInputProps | 透传 SelectInput 属性 | SelectInputProps | - | - |
| showAllLevels | 选中值是否显示完整路径 | boolean | true | - |
| size | 尺寸 | large | medium | small | medium | - |
| status | 输入框状态 | default | success | warning | error | default | - |
| suffix | 后置内容 | string | TNode | - | - |
| suffixIcon | 后置图标 | TNode | - | - |
| tagInputProps | 透传 TagInput 属性 | TagInputProps | - | - |
| tagProps | 透传 Tag 属性 | TagProps | - | - |
| tips | 下方提示文本 | string | TNode | - | - |
| trigger | 展开下一层级方式 | click | hover | click | - |
| value | 选中项的值 | CascaderValue | [] | - |
| defaultValue | 非受控选中值 | CascaderValue | [] | - |
| valueDisplay | 自定义选中项呈现 | string | TNode<{ value; onClose; displayValue?; selectedOptions }> | - | - |
| valueMode | 选中值模式 | onlyLeaf | parentFirst | all | onlyLeaf | - |
| valueType | 选中值类型 | single | full | single | - |
Events
| 事件 | 说明 | 类型 | 版本 |
|---|---|---|---|
| blur | 输入框失去焦点 | (context: { value: CascaderValue } & SelectInputBlurContext) => void | - |
| change | 选中值变化 | (value: CascaderValue, context: { node?: TreeNodeModel; source: 'invalid-value' | 'check' | 'clear' | 'uncheck' }) => void | - |
| focus | 获得焦点 | (context: { value: CascaderValue; e: FocusEvent }) => void | - |
| popupVisibleChange | 下拉框显示/隐藏 | (visible: boolean, context: PopupVisibleChangeContext) => void | - |
| remove | 多选移除选中项 | (context: { value: CascaderValue; node: TreeNodeModel }) => void | - |


