Skip to content

Cascader 多级联动

规则

基础示例

Props 配置示例

可搜索级联选择

多选级联

整段禁用

尺寸对比(小 / 中 / 大)

Events 事件示例

监听选择变化

选择后联动更新

完整配置项:TDesign_Cascader

valuestring | number | Array(单选/多选、valueType 不同结构略有差异)

Props

参数说明类型默认值版本
autofocus自动聚焦boolean--
borderless无边框模式booleanfalse-
checkProps透传 Checkbox 属性CheckboxProps--
checkStrictly父子节点选中状态不关联booleanfalse-
clearable是否可清空booleanfalse-
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是否可搜索booleanfalse-
inputProps透传 Input 属性InputProps--
keysvalue / label / children / disabled 字段别名TreeKeysType--
label左侧文本string | TNode--
lazy延迟加载子节点booleantrue-
load加载子树数据(children 为 true 时)(node: TreeNodeModel) => Promise<Array<CascaderOption>>--
loading加载状态booleanfalse-
loadingText远程加载提示文字string | TNode--
max多选数量上限(0 不限制)number0-
minCollapsedNum多选折叠阈值(0 不折叠)number0-
multiple是否多选booleanfalse-
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多选可搜索时选中后是否保留关键词booleantrue-
selectInputProps透传 SelectInput 属性SelectInputProps--
showAllLevels选中值是否显示完整路径booleantrue-
size尺寸large | medium | smallmedium-
status输入框状态default | success | warning | errordefault-
suffix后置内容string | TNode--
suffixIcon后置图标TNode--
tagInputProps透传 TagInput 属性TagInputProps--
tagProps透传 Tag 属性TagProps--
tips下方提示文本string | TNode--
trigger展开下一层级方式click | hoverclick-
value选中项的值CascaderValue[]-
defaultValue非受控选中值CascaderValue[]-
valueDisplay自定义选中项呈现string | TNode<{ value; onClose; displayValue?; selectedOptions }>--
valueMode选中值模式onlyLeaf | parentFirst | allonlyLeaf-
valueType选中值类型single | fullsingle-

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-

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用