Tree 树形控件
基础用法
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
自定义图标
可以针对不同的节点定制图标。
异步数据加载
点击展开节点，动态加载数据。
连接线
自定义展开/折叠图标
自定义字段
替换treeNode中 title,key,children字段为treeData中对应的字段
虚拟滚动
使用 height 属性则切换为虚拟滚动。
查询树节点
使用 setExpand 方法来展开对应的父节点，使用 scrollTo 方法来滚动到指定节点。
API
Tree Attributes
| Name | Description | Type | Default | Version |
|---|---|---|---|---|
| autoExpandParent | 是否自动展开父节点 | boolean | false | |
| blockNode | 是否节点占据一行 | boolean | false | |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false | |
| checkedKeys(v-model) | 选中复选框的树节点 | string[] | number[] | [] | |
| defaultExpandAll | 默认展开所有树节点 | boolean | false | |
| disabled | 将树禁用 | boolean | false | |
| expandedKeys(v-model) | 展开指定的树节点 | string[] | number[] | [] | |
| fieldNames | 替换 treeNode 中 label,value,children 字段为 treeData 中对应的字段 | object | {children:'children', label:'label', value:'value' } | |
| height | 设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动 | number | — | |
| load | 异步加载数据 | function(node) | — | |
| multiple | 支持点选多个节点（节点本身） | boolean | false | |
| selectable | 是否可选中 | boolean | true | |
| selectedKeys(v-model) | 设置选中的树节点 | string[] | number[] | [] | |
| showIcon | 是否展示 TreeNode title 前的图标 | boolean | false | |
| showLine | 是否展示连接线 | boolean | false | |
| treeData | treeNodes 数据 | TreeNode[] | — |
Tree Events
| Name | Description | Type |
|---|---|---|
| select | 点击树节点触发 | (checkedKeys: (string | number)[], e: { node: any }) => void |
| expand | 展开/收起节点时触发 | (expandedKeys: (string | number)[], e: { expand: boolean; node: any }) => void |
| check | 点击复选框触发 | (checkedKeys: (string | number)[], e: { checked: boolean; node: any }) => void |
TreeNode
| Name | Description | Type | Default |
|---|---|---|---|
| checkable | 当树为 checkable 时，设置独立节点是否展示 Checkbox | boolean | — |
| disableCheckbox | 禁掉 checkbox | boolean | false |
| disabled | 禁掉响应 | boolean | false |
| isLeaf | 设置为叶子节点(设置了loadData时有效) | boolean | false |
| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。 | string | number | — |
| title | 标题 | string | — |
Tree Slots
| Name | Description |
|---|---|
| icon | 自定义图标 |
| switcherIcon | 自定义树节点的展开/折叠图标 |
| title | 自定义标题 |
Tree Exposes
| Name | Description | Type |
|---|---|---|
| setExpand | 设置展开节点 | (str: string | ((node: TreeNodeType) => boolean)) => instance |
| scrollTo | 滚动到指定节点(开启虚拟滚动和数量达到 height / 28 向上取整) | (key: string | number) => instance |
贡献者
lazy