layui/package/document-component/src/document/zh-CN/components/tree.md

::: anchor :::

::: title 基本介绍 :::

::: describe 树形组件一般用于展示具有层级关系的数据 :::

::: title 基础使用 :::

::: demo 使用 lay-tree 标签, 创建树形组件, @node-click 监听节点点击。

:::

::: title 选择节点 :::

::: demo 使用 showCheckbox 属性开启复选框

:::

::: title 关闭连线 :::

::: demo 使用 showLine 属性关闭节点连线

:::

::: title 过渡动画 :::

::: demo 使用 collapse-transition 属性开启展开过渡动画

:::

::: title 定义标题 :::

::: demo 使用 title 插槽自定义节点标题

{{ data.id }}

:::

::: title Tree 属性 :::

::: table

Name	Description	Accepted Values
data	树型组件数据,类型 TreeData | TreeData[]	null
showCheckbox	是否显示复选框	false
onlyIconControl	是否仅允许节点左侧图标控制展开收缩	false
showLine	是否开启连接线	true
checkedKeys(v-model:checkedKeys)	开启 showCheckbox 后, 选中的节点	[]
collapse-transition	是否开启展示收起动画	false

:::

::: title Tree 数据 :::

::: table

Name	Description	Accepted Values
id	唯一值	-
title	节点名称	-
children	子节点	[]
disabled	该节点是否禁用	false
spread	该节点是否展开	false

:::

::: title Tree 事件 :::

::: table

Name	Description	Accepted Params
node-click	节点 click 事件	--

:::

::: contributor transition :::

::: previousNext transition :::