文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。
最简单的用法,展示可勾选,可选中,默认展开等功能。
设置multiple则Tree组件是多选的,则出现checkbox框。设置inline为false,则底层节点垂直排列,非横向排列
最简单的用法,展示可勾选,可选中,默认展开等功能。
通过slot-scope自定义节点内容,包含两个字段:当前节点node(object)和跟节点root(object)
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 可嵌套的节点属性的数组,生成 tree 的数据 | Array | [] |
| multiple | 是否支持多选 | Boolean | false |
| inline | 底层节点是否横向排列 | Boolean | true |
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-select-change | 点击树节点时触发 | 当前已选中的节点 |
| on-check-change | 点击复选框时触发 | 当前已勾选节点的数组 |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 节点名称 | String | null |
| expand | 是否展开子节点 | Boolean | false |
| selected | 是否选中子节点 | Boolean | false |
| checked | 是否勾选(如果勾选,子节点也会全部勾选) | Boolean | false |
| children | 子节点属性数组 | Array | null |