## Tree 树形控件 用清晰的层级结构展示信息,可展开或折叠。 ### 基础用法 基础的树形结构展示。 ::: demo ```html ``` ::: ### 可选择 适用于需要选择层级时使用。在下例中,由于在点击时才进行该层数据的获取,导致层级不可预知,如果没有下层数据,则点击后下拉按钮会消失。 ::: demo ```html ``` ::: ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | 展示数据 | array | — | — | | props | 配置选项,具体看下表 | object | — | — | | load | 加载子树数据的方法 | function(node, resolve) | — | — | | show-checkbox | 节点是否可被选择 | boolean | — | false | | render-content | 树节点的内容区的渲染 Function,会传入两个参数,h 与 { node: node }。 | Function | - | - | | highlight-current | 是否高亮当前选中节点,默认值是 false。| boolean | - | false | ### props | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | label | 指定节点标签为节点对象的某个属性值 | string | — | — | | children | 指定子树为节点对象的某个属性值 | string | — | — | ### 方法 `Tree` 拥有如下方法,返回目前被选中的节点数组: | 方法名 | 说明 | 参数 | |------|--------|------| | getCheckedNodes | 若节点可被选择(即 `show-checkbox` 为 `true`),
则返回目前被选中的节点所组成的数组 | 接收一个 boolean 类型的参数,若为 `true` 则
仅返回被选中的叶子节点,默认值为 `false` | ### Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | node-click | 节点被点击时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 | | check-change | 节点选中状态发生变化时的回调 | 共三个参数,依次为:传递给 `data` 属性的数组中该节点所对应的对象、
节点本身是否被选中、节点的子树中是否有被选中的节点 |