naive-ui/demo/documentation/components/tree/zhCN/index.demo-entry.md

# 树 Tree
老实说我生物不好，认不出几种树来。

以及，不光是生物不好，平衡树也是看了就忘。

## 演示
```demo
basic
cascade
async
multiple
filter
drag-drop-debug
```

## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|block-node|`boolean`|`false`||
|cancelable|`boolean`|`false`|选中之后是否允许取消|
|cascade|`boolean`|`false`|是否关联选项|
|checkable|`boolean`|`false`||
|checked-keys|`Array<string \| number>`|`undefined`|如果设定则 checked 状态受控|
|data|`Array<TreeNode>`|`[]`|树的节点数据。重新设置 data 会将一些非受控状态清空，如果你需要在使用中改动 data，最好以受控的方式控制树|
|default-checked-keys|`Array<string \| number>`|`[]`||
|default-expand-all|`boolean`|`false`||
|default-expanded-keys|`Array<string \| number>`|`[]`||
|default-selected-keys|`Array<string \| number>`|`[]`||
|expanded-keys|`Array<string \| number>`|`undefined`|如果设定则展开受控|
|filter|`(node: TreeNode) => boolean`|一个简单的字符串过滤算法||
|multiple|`boolean`|`false`||
|on-load|`(node: TreeNode) => Promise<any>`|`undefined`||
|pattern|`string`|`''`||
|remote|`boolean`|`false`|是否异步获取选项，和 onLoad 配合|
|selectable|`boolean`|`true`||
|selected-keys|`Array<string \| number>`|`undefined`|如果设定则 selected 状态受控|
|theme|`'light' \| 'dark' \| string`|`undefined`||
|on-update:selected-keys|`(keys: Array<string \| number>) => any`|`undefined`||
|on-update:expanded-keys|`(keys: Array<string \| number>) => any`|`undefined`||
|on-update:checked-keys|`(keys: Array<string \| number>) => any`|`undefined`||
<!-- |draggable|`boolean`|`false`|| -->
<!-- |expand-on-dragenter|`boolean`|`true`|是否在拖入后展开节点| -->
<!-- |dragstart|`(data: { node: TreeNode, event: DragEvent })`||
|dragend|`(data: { node: TreeNode, event: DragEvent })`||
|dragenter|`(data: { node: TreeNode, event: DragEvent })`||
|dragleave|`(data: { node: TreeNode, event: DragEvent })`||
|drop|`(data: { node: TreeNode, dragNode: TreeNode, dropPosition: 'top' \| 'center' \| 'bottom', event: DragEvent })`|| -->
-												doc(input): zh-cn

											
										
										
											2020-02-04 20:45:34 +08:00
+								# 树 Tree
-												doc(tree): zhCN & enUS

											
										
										
											2020-02-25 23:03:38 +08:00
+								老实说我生物不好，认不出几种树来。
 								以及，不光是生物不好，平衡树也是看了就忘。
-												doc(tree): async & drag & others

											
										
										
											2020-02-25 18:48:29 +08:00
+								## 演示
 								```demo
 								basic
-												refactor(tree): use treemate, add cascade prop

											
										
										
											2020-11-13 17:02:30 +08:00
+								cascade
-												doc(tree): async & drag & others

											
										
										
											2020-02-25 18:48:29 +08:00
+								async
-												doc(tree): zhCN & enUS

											
										
										
											2020-02-25 23:03:38 +08:00
+								multiple
 								filter
-												refactor(tree): clean cssr codes (#289)


											
										
										
											2020-09-01 17:05:21 +08:00
+								drag-drop-debug
-												doc(tree): async & drag & others

											
										
										
											2020-02-25 18:48:29 +08:00
+								```
-												doc(tree): zhCN & enUS

											
										
										
											2020-02-25 23:03:38 +08:00
 								## Props
 								|名称|类型|默认值|说明|
 								|-|-|-|-|
 								|block-node|`boolean`|`false`||
-												refactor(tree): support vue3

											
										
										
											2020-10-01 14:46:08 +08:00
+								|cancelable|`boolean`|`false`|选中之后是否允许取消|
-												refactor(tree): use treemate, add cascade prop

											
										
										
											2020-11-13 17:02:30 +08:00
+								|cascade|`boolean`|`false`|是否关联选项|
-												doc(tree): zhCN & enUS

											
										
										
											2020-02-25 23:03:38 +08:00
+								|checkable|`boolean`|`false`||
-												chore: fix some props default value

											
										
										
											2020-11-13 21:26:18 +08:00
+								|checked-keys|`Array<string \| number>`|`undefined`|如果设定则 checked 状态受控|
-												refactor(tree): support vue3

											
										
										
											2020-10-01 14:46:08 +08:00
+								|data|`Array<TreeNode>`|`[]`|树的节点数据。重新设置 data 会将一些非受控状态清空，如果你需要在使用中改动 data，最好以受控的方式控制树|
 								|default-checked-keys|`Array<string \| number>`|`[]`||
-												doc(tree): zhCN & enUS

											
										
										
											2020-02-25 23:03:38 +08:00
+								|default-expand-all|`boolean`|`false`||
 								|default-expanded-keys|`Array<string \| number>`|`[]`||
 								|default-selected-keys|`Array<string \| number>`|`[]`||
-												chore: fix some props default value

											
										
										
											2020-11-13 21:26:18 +08:00
+								|expanded-keys|`Array<string \| number>`|`undefined`|如果设定则展开受控|
-												doc(tree): zhCN & enUS

											
										
										
											2020-02-25 23:03:38 +08:00
+								|filter|`(node: TreeNode) => boolean`|一个简单的字符串过滤算法||
-												refactor(tree): support vue3

											
										
										
											2020-10-01 14:46:08 +08:00
+								|multiple|`boolean`|`false`||
-												docs(tree): vue3

											
										
										
											2020-10-22 15:19:23 +08:00
+								|on-load|`(node: TreeNode) => Promise<any>`|`undefined`||
-												refactor(tree): support vue3

											
										
										
											2020-10-01 14:46:08 +08:00
+								|pattern|`string`|`''`||
 								|remote|`boolean`|`false`|是否异步获取选项，和 onLoad 配合|
 								|selectable|`boolean`|`true`||
-												chore: fix some props default value

											
										
										
											2020-11-13 21:26:18 +08:00
+								|selected-keys|`Array<string \| number>`|`undefined`|如果设定则 selected 状态受控|
-												docs(modal): set default handlers of modal to undefined

											
										
										
											2020-10-23 15:01:01 +08:00
+								|theme|`'light' \| 'dark' \| string`|`undefined`||
-												refactor(tree): support vue3

											
										
										
											2020-10-01 14:46:08 +08:00
+								|on-update:selected-keys|`(keys: Array<string \| number>) => any`|`undefined`||
 								|on-update:expanded-keys|`(keys: Array<string \| number>) => any`|`undefined`||
 								|on-update:checked-keys|`(keys: Array<string \| number>) => any`|`undefined`||
-												refactor(tree): clean cssr codes (#289)


											
										
										
											2020-09-01 17:05:21 +08:00
+								<!-- |draggable|`boolean`|`false`|| -->
-												docs(tree): vue3

											
										
										
											2020-10-22 15:19:23 +08:00
+								<!-- |expand-on-dragenter|`boolean`|`true`|是否在拖入后展开节点| -->
-												refactor(tree): clean cssr codes (#289)


											
										
										
											2020-09-01 17:05:21 +08:00
+								<!-- |dragstart|`(data: { node: TreeNode, event: DragEvent })`||
-												doc: refine type annotations

											
										
										
											2020-05-31 14:30:05 +08:00
+								|dragend|`(data: { node: TreeNode, event: DragEvent })`||
 								|dragenter|`(data: { node: TreeNode, event: DragEvent })`||
 								|dragleave|`(data: { node: TreeNode, event: DragEvent })`||
-												refactor(tree): clean cssr codes (#289)


											
										
										
											2020-09-01 17:05:21 +08:00
+								|drop|`(data: { node: TreeNode, dragNode: TreeNode, dropPosition: 'top' \| 'center' \| 'bottom', event: DragEvent })`|| -->