文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。
最简单的用法,展示可勾选,可选中,默认展开等功能。
设置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 |