2020-02-04 20:45:34 +08:00
|
|
|
|
# 树 Tree
|
2020-12-12 14:44:44 +08:00
|
|
|
|
|
2020-02-25 23:03:38 +08:00
|
|
|
|
老实说我生物不好，认不出几种树来。
|
|
|
|
|
|
|
|
|
|
|
|
以及，不光是生物不好，平衡树也是看了就忘。
|
|
|
|
|
|
|
2020-02-25 18:48:29 +08:00
|
|
|
|
## 演示
|
2020-12-12 14:44:44 +08:00
|
|
|
|
|
2020-02-25 18:48:29 +08:00
|
|
|
|
```demo
|
|
|
|
|
|
basic
|
2020-11-13 17:02:30 +08:00
|
|
|
|
cascade
|
2020-02-25 18:48:29 +08:00
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
## Props
|
2020-12-12 14:44:44 +08:00
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 说明 |
|
|
|
|
|
|
| --- | --- | --- | --- | --- | --- |
|
|
|
|
|
|
| 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 })` | | --> |
|
