# Tree Picker 树形选择器

[toc]

此组件为树形选择器，可以进行一些级联选择。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-tree-picker": "../dist/tree-picker/index"
  }
}

```

## 用法

```js
// index.js 文件
Page({
	data: {
		show: false,
    value: '',
		list: [
			{
				name: "0",
				label: "北京",
				children: [
					{
						name: "0-0",
						label: "市区",
						children: [
							{
								name: "0-0-0",
								label: "东城区"
							},
							{
								name: "0-0-0",
								label: "西城区"
							},
							{
								name: "0-0-0",
								label: "海淀区"
							}
						]
					}
				]
			},
			{
				name: "1",
				label: "广东",
				children: [
					{
						name: "1-0",
						label: "广州",
						children: [
							{
								name: "1-0-0",
								label: "天河区"
							},
							{
								name: "1-0-1",
								label: "越秀区"
							},
							{
								name: "1-0-2",
								label: "海珠区"
							}
						]
					},
					{
						name: "1-1",
						label: "深圳",
						children: [
							{
								name: "1-1-0",
								label: "南山区"
							},
							{
								name: "1-1-1",
								label: "福田区"
							},
							{
								name: "1-1-2",
								label: "宝安区"
							}
						]
					},
					{
						name: "1-2",
						label: "惠州",
						children: [
							{
								name: "1-2-0",
								label: "惠阳区"
							}
						]
					}
				]
			},
			{
				name: "2",
				label: "安徽",
				children: [
					{
						name: "2-0",
						label: "合肥",
						children: [
							{
								name: "2-0-0",
								label: "蜀山区"
							}
						]
					}
				]
			}
		],
		defaultValue: [1, 1, 1],
	},

	onChange(e){
		console.log("已选择：", e.detail)
	},

	handleSelect() {
    this.setData({
      show: true,
    });
  },
})

```

### 基本用法

```html
<tea-tree-picker
	list="{{ list }}"
	bind:change="onChange"
></tea-tree-picker>
```

### 传入默认值

```html
<tea-tree-picker
	list="{{ list }}"
	bind:change="onChange"
	index="{{ defaultValue }}"
></tea-tree-picker>
```

### 选择最后一项时不自动完成

```html
<tea-tree-picker
	list="{{ list }}"
	bind:change="onChange"
	autoComplete="{{ false }}"
></tea-tree-picker>
```

### 与form结合

```html
<tea-list>
	<tea-form-item
		type="select"
		label="选择"
		placeholder="请选择内容"
		value="{{ value }}"
		detail clickable bordered bind:select="handleSelect"
	></tea-form-item>
</tea-list>


<tea-popup
  show="{{ show }}"
  position="bottom"
  backdropClosable="{{ true }}"
>

  <view style="height: 300px; overflow-y: auto;">
    <tea-tree-picker
      list="{{ list }}"
      bind:change="onChange"
      default-index="{{[0]}}"
    ></tea-tree-picker>
  </view>
</tea-popup>
```

## Props

| 参数            | 描述              | 类型        | 默认值    |
| ------------- | --------------- | --------- | ------ |
| list          | 需要渲染的列表         | `Array`   | -      |
| current       | 默认传入的值          | `Array`   | -      |
| autoComplete  | 选择最后一项时是否自动完成   | `Boolean` | `true` |
| listMaxHeight | 选择列表的最大高度，单位是px | `Number`  | `200`  |

## 事件

| 事件名      | 描述      | 回调参数  |
| -------- | ------- | ----- |
| change   | 选择节点时触发 | 选择的数据 |
| complete | 完成选择时触发 | 选择的数据 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                                 | 默认值                               | 描述  |
| ----------------------------------- | --------------------------------- | --- |
| tree-picker-active-color            | @form-active-color                | -   |
| tree-picker-light-color             | @background-secondary-light-color | -   |
| tree-picker-header-background-color | @background-base-color            | -   |