Tree 树形控件
用清晰的层级结构展示信息，可展开或折叠。
基础用法
基础的树形结构展示
可选择
适用于需要选择层级时使用。
懒加载自定义叶子节点
多次懒加载
禁用复选框
节点的复选框可以设置为禁用。
默认展开以及默认选中
树节点可以在初始化阶段被设置为展开和选中。
树节点的选择
自定义节点内容
节点的内容支持自定义，可以在节点区添加按钮或图标等内容
自定义节点类名
节点的类名支持自定义。
树节点过滤
树节点是可以被过滤的
手风琴模式
对于同一级的节点，每次只能展开一个
可拖拽节点
通过 draggable 属性可让节点变为可拖拽
属性
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 展示数据 | array | — | — |
| node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | string | — | — |
| props | 配置选项，具体看下表 | object | — | — |
| load | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | function(node, resolve, reject) | — | — |
| highlight-current | 是否高亮当前选中节点，默认值是 false。 | boolean | — | false |
| default-expand-all | 是否默认展开所有节点 | boolean | — | false |
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | — | true |
| check-on-click-node | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 | boolean | — | false |
| default-expanded-keys | 默认展开的节点的 key 的数组 | array | — | — |
| show-checkbox | 节点是否可被选择 | boolean | — | false |
| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false |
| icon | 自定义树节点图标组件 | string | Component | — | — |
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false |
Props
| Props | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | — |
| children | 指定子树为节点对象的某个属性值 | string | — | — |
| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | string, function(data, node) | — | — |
| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | string, function(data, node) | — | — |
方法
Tree 组件有以下方法，均返回当前选中的节点数组
| 方法 | 描述 | 参数 |
|---|---|---|
| filter | 过滤所有树节点，过滤后的节点将被隐藏 | 接收一个参数并指定为 filter-node-method 属性的第一个参数 |
| updateKeyChildren | 为节点设置新数据，只有当设置 node-key 属性的时候才可用 | (key, data) 接收两个参数: 1. 节点的 key 2. 新数据 |
| getCheckedNodes | 如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组 | (leafOnly, includeHalfChecked) 接收两个布尔类型参数: 1. 默认值为 false. 若参数为 true, 它将返回当前选中节点的子节点 2. 默认值为 false. 如果参数为 true, 返回值包含半选中节点数据 |
| setCheckedNodes | 设置目前勾选的节点，使用此方法必须提前设置 node-key 属性 | 要选中的节点构成的数组 |
| getCheckedKeys | 若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组 | (leafOnly) 接收一个布尔类型参数，默认为 false. 如果参数是 true, 它只返回当前选择的子节点数组。 |
| setCheckedKeys | 设置目前选中的节点，使用此方法必须设置 node-key 属性 | (keys, leafOnly) 接收两个参数: 1. 一个需要被选中的多节点 key 的数组 2. 布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false. |
| setChecked | 设置节点是否被选中, 使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数: 1. 要选中的节点的 key 或者数据 2. 一个布尔类型参数表明是否选中. 3. 一个布尔类型参数表明是否递归选中子节点 |
| setCurrentKey | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key, shouldAutoExpandParent=true) 1. 待被选节点的 key， 如果为 null, 取消当前选中的节点 2. 是否展开父节点 |
| getNode | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 节点的 data 或 key |
插槽
| 插槽名 | 说明 |
|---|---|
| empty | 当数据为空时自定义的内容 |