2020-08-27 17:18:57 +08:00

6.0 KiB
Raw Blame History

pageClass
comp-page-class

Tree 树形控件

概述

文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

代码示例

最简单的用法点击节点可选中节点。节点expand属性配置节点是否展开。

点击展开时,动态去加载子数据,如果已经加载过,则改为展开和关闭

子节点是否选中继承父节点的状态

设置multiple则Tree组件是多选的则出现checkbox框。设置inline为false则底层节点垂直排列非横向排列

{{ node.name }}

通过slot-scope自定义节点内容包含两个字段当前节点node(object)和跟节点root(object)

API

Tree Props

属性 说明 类型 默认值
data 可嵌套的节点属性的数组,生成 tree 的数据 Array Array
data.name 节点名称 String null
data.expand 是否展开子节点 Boolean false
data.selected 是否选中子节点 Boolean false
data.checked 是否勾选(如果勾选,子节点也会全部勾选) Boolean false
data.children 子节点属性数组 Array null
multiple 是否支持多选 Boolean false
inline 底层节点是否横向排列 Boolean true
loadData 加载数据 Function null
twiceClickSelected 当节点被选中时,再次点击是否继续选中 Boolean false

Tabs Events

事件名 说明 返回值
on-select-change 点击节点时触发 (node)
on-check-change 点击节点前的复选框时触发 ([node, node])