2020-02-04 20:45:34 +08:00
|
|
|
|
# 树 Tree
|
2020-02-25 23:03:38 +08:00
|
|
|
|
老实说我生物不好，认不出几种树来。
|
|
|
|
|
|
|
|
|
|
|
|
以及，不光是生物不好，平衡树也是看了就忘。
|
|
|
|
|
|
|
2020-02-25 18:48:29 +08:00
|
|
|
|
## 演示
|
|
|
|
|
|
```demo
|
|
|
|
|
|
basic
|
|
|
|
|
|
async
|
2020-02-25 23:03:38 +08:00
|
|
|
|
multiple
|
|
|
|
|
|
filter
|
2020-09-01 17:05:21 +08:00
|
|
|
|
drag-drop-debug
|
2020-02-25 18:48:29 +08:00
|
|
|
|
```
|
2020-02-25 23:03:38 +08:00
|
|
|
|
## V-model
|
|
|
|
|
|
|Prop|Event|
|
|
|
|
|
|
|-|-|
|
|
|
|
|
|
|selected-keys|`selected-keys-change`|
|
|
|
|
|
|
|
|
|
|
|
|
## Props
|
|
|
|
|
|
|名称|类型|默认值|说明|
|
|
|
|
|
|
|-|-|-|-|
|
2020-09-10 14:18:02 +08:00
|
|
|
|
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
2020-02-25 23:03:38 +08:00
|
|
|
|
|expand-on-dragenter|`boolean`|`true`|是否在拖入后展开节点|
|
|
|
|
|
|
|block-node|`boolean`|`false`||
|
|
|
|
|
|
|data|`Array<TreeNode>`|`[]`|树的节点数据。重新设置 data 会将一些非受控状态清空，如果你需要在使用中改动 data，最好以受控的方式控制树|
|
|
|
|
|
|
|checkable|`boolean`|`false`||
|
|
|
|
|
|
|multiple|`boolean`|`false`||
|
|
|
|
|
|
|selectable|`boolean`|`true`||
|
|
|
|
|
|
|default-expand-all|`boolean`|`false`||
|
|
|
|
|
|
|cancelable|`boolean`|`false`|选中之后是否允许取消|
|
|
|
|
|
|
|remote|`boolean`|`false`|是否异步获取选项，和 onLoad 配合|
|
|
|
|
|
|
|on-load|`(node: TreeNode) => Promise<any>`|`null`||
|
|
|
|
|
|
|default-expanded-keys|`Array<string \| number>`|`[]`||
|
|
|
|
|
|
|expanded-keys|`Array<string \| number>`|`null`|如果设定则展开受控|
|
|
|
|
|
|
|selected-keys|`Array<string \| number>`|`null`|如果设定则 selected 状态受控|
|
|
|
|
|
|
|default-selected-keys|`Array<string \| number>`|`[]`||
|
|
|
|
|
|
|checked-keys|`Array<string \| number>`|`null`|如果设定则 checked 状态受控|
|
|
|
|
|
|
|default-checked-keys|`Array<string \| number>`|`[]`||
|
|
|
|
|
|
|pattern|`string`|`''`||
|
|
|
|
|
|
|filter|`(node: TreeNode) => boolean`|一个简单的字符串过滤算法||
|
2020-09-01 17:05:21 +08:00
|
|
|
|
<!-- |draggable|`boolean`|`false`|| -->
|
2020-02-25 23:03:38 +08:00
|
|
|
|
|
|
|
|
|
|
## Events
|
|
|
|
|
|
|名称|参数|说明|
|
|
|
|
|
|
|-|-|-|
|
2020-05-31 14:30:05 +08:00
|
|
|
|
|selected-keys-change|`(keys: Array<string \| number>)`||
|
|
|
|
|
|
|expanded-keys-change|`(keys: Array<string \| number>)`||
|
|
|
|
|
|
|checked-keys-change|`(keys: Array<string \| number>)`||
|
2020-09-01 17:05:21 +08:00
|
|
|
|
<!-- |dragstart|`(data: { node: TreeNode, event: DragEvent })`||
|
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 })`||
|
2020-09-01 17:05:21 +08:00
|
|
|
|
|drop|`(data: { node: TreeNode, dragNode: TreeNode, dropPosition: 'top' \| 'center' \| 'bottom', event: DragEvent })`|| -->
|
