HuajisheTools/HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/tree-select/README.md

title, description, spline, isComponent

title	description	spline	isComponent
TreeSelect 树形选择	适用于选择树形的数据结构。	form	true

该组件于 0.32.0 版本上线，请留意版本。

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-tree-select": "tdesign-miniprogram/tree-select/tree-select"
}

代码演示

在开发者工具中预览效果

Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"

组件类型

基础树形选择

{{ base }}

多选树形选择

{{ multiple }}

组件状态

三级树形选择

{{ normal }}

API

TreeSelect Props

名称	类型	默认值	描述	必传
style	Object	-	样式	N
custom-style	Object	-	样式，一般用于开启虚拟化组件节点场景	N
height	String / Number	336	高度，默认单位为 px	N
keys	Object	-	用来定义 value / label 在 options 中对应的字段别名。TS 类型：KeysType。通用类型定义	N
multiple	Boolean	false	是否允许多选	N
options	Array	[]	选项。TS 类型：Array<DataOption>	N
value	String / Number / Array	-	选中值。TS 类型：TreeSelectValue type TreeSelectValue = string | number | Array<TreeSelectValue>。详细类型定义	N
default-value	String / Number / Array	undefined	选中值。非受控属性。TS 类型：TreeSelectValue type TreeSelectValue = string | number | Array<TreeSelectValue>。详细类型定义	N

TreeSelect Events

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

TreeSelect External Classes

类名	描述
t-class	根节点样式类
t-class-left-column	左侧第一列样式类
t-class-left-item	左侧第一列子项样式类
t-class-middle-item	中间列子项样式类
t-class-right-column	右侧第一列样式类
t-class-right-item	右侧第一列子项样式类
t-class-right-item-label	右侧第一列子项标签样式类

CSS Variables

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值	描述
--td-tree-bg-color	@bg-color-container	-
--td-tree-colum-width	206rpx	-
--td-tree-item-active-color	@brand-color	-
--td-tree-item-font-size	32rpx	-
--td-tree-item-height	112rpx	-
--td-tree-root-bg-color	@bg-color-secondarycontainer	-