layui/example/docs/zh-CN/components/tree.md

::: anchor :::

::: demo

是否可开启选择框：

checkedKeys：

    {{ checkedKeys }}
  

只能通过节点左侧图标来展开收缩：

是否开启连接线：

当前点击的节点：

    {{ clickNode }}
  

<script setup> import { ref } from 'vue'; const data = ref([{ title: '一级1', id: 1, field: 'name1', checked: true, spread: true, children: [{ title: '二级1-1 可允许跳转', id: 3, field: 'name11', href: 'https://www.layui.com/', children: [{ title: '三级1-1-3', id: 23, field: '', children: [{ title: '四级1-1-3-1', id: 24, field: '', children: [{ title: '五级1-1-3-1-1', id: 30, field: '' }, { title: '五级1-1-3-1-2', id: 31, field: '' }] }] }, { title: '三级1-1-1', id: 7, field: '', children: [{ title: '四级1-1-1-1 可允许跳转', id: 15, field: '', href: 'https://www.layui.com/doc/' }] }, { title: '三级1-1-2', id: 8, field: '', children: [{ title: '四级1-1-2-1', id: 32, field: '' }] }] }, { title: '二级1-2', id: 4, spread: true, children: [{ title: '三级1-2-1', id: 9, field: '', disabled: true }, { title: '三级1-2-2', id: 10, field: '' }] }, { title: '二级1-3', id: 20, field: '', children: [{ title: '三级1-3-1', id: 21, field: '' }, { title: '三级1-3-2', id: 22, field: '' }] }] }, { title: '一级2', id: 2, field: '', spread: true, children: [{ title: '二级2-1', id: 5, field: '', spread: true, children: [{ title: '三级2-1-1', id: 11, field: '' }, { title: '三级2-1-2', id: 12, field: '' }] }, { title: '二级2-2', id: 6, field: '', children: [{ title: '三级2-2-1', id: 13, field: '' }, { title: '三级2-2-2', id: 14, field: '', disabled: true }] }] }, { title: '一级3', id: 16, field: '', children: [{ title: '二级3-1', id: 17, field: '', fixed: true, children: [{ title: '三级3-1-1', id: 18, field: '' }, { title: '三级3-1-2', id: 19, field: '' }] }, { title: '二级3-2', id: 27, field: '', children: [{ title: '三级3-2-1', id: 28, field: '' }, { title: '三级3-2-2', id: 29, field: '' }] }] }]); const iconCtrl = ref(false); const showLine = ref(true); const clickNode = ref(null); const showCheckbox = ref(true); const checkedKeys = ref([1]); const disabled = ref(false); function handleClick(node) { clickNode.value = node } </script>

:::

::: title Tree 属性 :::

::: table

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

:::

::: title Tree 数据 :::

::: table

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

:::

::: title Tree 事件 :::

::: table

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

:::

::: comment :::

::: previousNext tree :::