TreeSelect 树形选择

代码演示

组件类型

基础树形选择

在 Stackblitz 中打开

多选树形选择

在 Stackblitz 中打开

组件状态

三级树形选择

在 Stackblitz 中打开

TreeSelect Props

名称类型默认值描述必传
customStyleString-自定义组件样式N
filterableBooleanfalse是否可搜索N
heightString / Number336高度,默认单位为 pxN
keysObject-用来定义 value / label / disabled / childrendata 数据中对应的字段别名,示例:{ value: 'key', label: 'name', children: 'list' }。TS 类型:TreeKeysType通用类型定义N
multipleBooleanfalse是否允许多选N
optionsArray[]选项。TS 类型:Array<DataOption>N
valueString / Number / Array-选中值。支持语法糖 v-modelv-model:value。TS 类型:TreeSelectValue type TreeSelectValue = string \| number \| Array<TreeSelectValue>详细类型定义N
defaultValueString / Number / Array-选中值。非受控属性。TS 类型:TreeSelectValue type TreeSelectValue = string \| number \| Array<TreeSelectValue>详细类型定义N
onChangeFunctionTS 类型:(value: TreeSelectValue, level: TreeLevel) => void
点击任何节点均会触发;level 代表当前点击的层级,0 代表最左侧,依次递进。详细类型定义
type TreeLevel = 0 \| 1 \| 2
N

TreeSelect Events

名称参数描述
change(value: TreeSelectValue, level: TreeLevel) 点击任何节点均会触发;level 代表当前点击的层级,0 代表最左侧,依次递进。详细类型定义
type TreeLevel = 0 \| 1 \| 2

何时使用

当一组选项由2-3个层级构成,且每个层级有大量的选项需要用户逐级选择时使用。

推荐/慎用示例

级联选择器的层级不宜超过3层,层级过多时应调整数据结构或改用级联选择器。

相似组件

组件名何时使用
选择器当需要在有限的空间展示大量选项供用户选择时,或一组选项由递进层级构成,需要用户逐级选择使用时。
级联选择器当一组选项由递进层级构成,且有每个层级有大量的选项需要用户逐级选择使用时。