TTree / 树形控件

Tree displays hierarchical data with expand/collapse, checkbox selection, and accordion mode. / 树形控件展示层级数据，支持展开/折叠、复选框选择和手风琴模式。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
data	TreeNode[]	[]	Tree node data
nodeKey	string	'id'	Unique key field
children	string	'children'	Children field name
labelKey	string	'label'	Label field name
showCheckbox	boolean	false	Show checkboxes
checkMode	'cascade' | 'independent'	'cascade'	Check mode
accordion	boolean	false	Accordion expand mode
defaultExpandAll	boolean	false	Expand all by default
variant	'default' | 'flush'	'default'	Visual variant
indent	number	24	Indent in pixels

Basic Usage / 基础用法

<script setup lang="ts">
import { TTree } from '@gulcc/tabler-vue'

const data = [
  { id: 1, label: 'Node 1 / 节点一', children: [
    { id: 2, label: 'Node 1.1 / 节点一' },
    { id: 3, label: 'Node 1.2 / 节点二' },
  ]},
]
</script>

<template>
  <TTree :data="data" default-expand-all />
</template>

Tips / 避坑指南

• nodeKey must uniquely identify each node — used for tracking expanded/checked keys
• checkMode="cascade" propagates checked state to parent/child nodes
• When accordion=true, only one parent node can be expanded at a time
• Node data can have any additional fields — they are passed through to rendering