Tree 树形控件
树形选择控件,用于展示树状数据结构。
何时使用
- 需要展示组织架构、文件目录等层级数据时
- 需要选择树节点时
代码演示
API
| 参数 | 说明 | 类型 | 默认值 |
| treeData | 树数据 | TreeNode[] | [] |
| selectedKeys | 选中的节点 key 数组 | Array<string \| number> | [] |
| replaceFields | 字段映射配置 | { title, key, children } | { title: 'name', key: 'id', children: 'children' } |
| loadData | 异步加载子节点的函数 | (id, deptLevel) => Promise<TreeNode[]> | - |
| selectable | 是否可选中 | boolean | true |
| checkable | 是否可勾选 | boolean | false |
| disabled | 是否禁用 | boolean | false |
TreeNode
| 参数 | 说明 | 类型 |
| id | 节点唯一标识 | string \| number |
| name | 节点名称 | string |
| children | 子节点 | TreeNode[] |
| deptLevel | 层级深度 | number |
事件
| 事件名 | 说明 | 回调参数 |
| select | 选中节点时回调 | (id, deptLevel) => void |
| expand | 展开/收起时回调 | (keys, { expanded, node }) => void |