# t-tree

Tree 树形控件

t-tree 组件介绍

t-tree 是功能强大的树形结构组件，支持多级节点展开、折叠、选择、懒加载，具有增删改操作按钮，支持手风琴模式，适用于组织架构、文件目录、分类管理等场景。

t-tree 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-tree 基础用法

基础用法参考 demo/tree/tree.uvue。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title="Tree 树"
				class="mb-15"
				sub-title="功能强大,多级节点展开、折叠、选择、懒加载，支持插槽灵活布局,并具有丰富的样式定制和事件响应能力"></t-card>
		<t-card title="亮点"
				class="mb-15"
				type="error"
				effect="light"
				sub-title="支持折叠动画。功能齐全"></t-card>
		<t-tree :list="list"
				type="primary"
				:row-height="60"
				:selects="selects"
				:folds="['1','2']"
				:show-checkbox="true"
				@edit="edit"
				@add="add"
				:load="lazyload"
				@delete="trash"
				@change="change"
				:accordion="false"></t-tree>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import { TuiGuid } from '@/uni_modules/tui-common'
	const accordion = ref(false)
	const showCheckbox = ref(true)
	const selects = ref<string[]>(['11', '6'])
	const list = ref<UTSJSONObject[]>([{
		id: '1',
		label: '一级 1',
		children: [{
			id: '4',
			label: '二级 1-1',
			children: [{
				id: '9',
				label: '三级 1-1-1',
				disabled: true,
				children: [{
					id: '11',
					label: '四级 1-1-1'
				}]
			}, {
				id: '12',
				label: '三级 1-1-1',
				children: [{
					id: '13',
					label: '四级 1-1-1',
				}, {
					id: '14',
					label: '四级 4-2-1',
				}]
			}, {
				id: '10',
				label: '三级 1-1-2'
			}]
		}, {
			id: '16',
			label: '二级 1-1',
			children: [{
				id: '17',
				label: '三级 1-1-1',
				disabled: true,
				children: [{
					id: '18',
					label: '四级 1-1-1'
				}]
			}, {
				id: '19',
				label: '三级 1-1-1',
				children: [{
					id: '20',
					label: '四级 1-1-1',
				}]
			}, {
				id: '21',
				label: '最后一级 1-1-2'
			}]
		}]
	}, {
		id: '2',
		label: '一级 2',
		children: [{
			id: '5',
			label: '二级 2-1',
			disabled: true
		}, {
			id: '6',
			label: '二级 2-2'
		}]
	}, {
		id: '3',
		label: '一级 3',
		children: [{
			id: '7',
			label: '二级 3-1'
		}, {
			id: '8',
			label: '二级 3-2',
		}]
	}, {
		id: '89',
		label: '懒加载',
		lazy: true
	}])

	function change(e : string[]) {
		console.log(e)
	}

	function add(callback : (e : UTSJSONObject[]) => void) {
		callback([{
			id: TuiGuid(10),
			label: `新增${TuiGuid(10)}`
		}])
	}

	function edit(e : UTSJSONObject) {
		uni.showModal({
			title: `label更新`,
			editable: true,
			success: (res) => {
				if (res.confirm) {
					e.set('label', res.content)
				}
			}
		})
	}

	function trash(e : UTSJSONObject) {
		uni.showModal({
			title: '提示',
			content: `确认删除${e.getString('item.label')}吗？`,
			success: function (res) {
				if (res.confirm) {
					const callback = e.getAny('callback') as () => void
					callback()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	function lazyload(e : UTSJSONObject) : Promise<UTSJSONObject[]> {
		return new Promise((
			resolve : (res : UTSJSONObject[]) => void,
		) => {
			setTimeout(() => {
				console.log(e) //选中的项
				resolve([{
					id: TuiGuid(10),
					label: `异步数据${TuiGuid(10)}`
				}, {
					id: TuiGuid(10),
					label: `异步数据${TuiGuid(10)}`
				}])
			}, 2000)
		})
	}
</script>

t-tree Props

属性名	说明	类型	默认值
list	树形数据源	UTSJSONObject[]	[]
selects	选中项 ID 集合	string[]	[]
folds	默认展开的节点 ID 集合	string[]	[]
accordion	是否开启手风琴模式	boolean	false
showCheckbox	是否显示选择框	boolean	true
lazy	是否开启懒加载	boolean	false
load	懒加载函数	function	() => Promise.resolve([])
showAddButton	是否显示增加按钮	boolean	true
addIcon	增加按钮图标	string	'plus-circle'
addIconClass	增加按钮样式	string	''
showEditButton	是否显示编辑按钮	boolean	true
editIcon	编辑按钮图标	string	'edit-pen'
editIconClass	编辑按钮样式	string	''
showDeleteButton	是否显示删除按钮	boolean	true
deleteIcon	删除按钮图标	string	'trash'
deleteIconClass	删除按钮样式	string	''
rowHeight	每行高度（px）	number	50
idKey	节点唯一标识字段名	string	'id'
labelKey	节点显示文字字段名	string	'label'
disabledKey	节点禁用字段名	string	'disabled'
childrenKey	子节点字段名	string	'children'
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	''

t-tree Events

事件名	说明	回调参数
change	选中状态变化时触发	string[]（选中项 ID 数组）
add	点击增加按钮时触发	节点数据
edit	点击编辑按钮时触发	节点数据
delete	点击删除按钮时触发	节点数据
click	点击节点时触发	event
initFinished	组件初始化完成触发	组件节点信息
touchstart	触摸开始时触发	event
touchend	触摸结束时触发	event
touchmove	触摸移动时触发	event
touchcancel	触摸取消时触发	event

外部类

类名	说明
add-icon-class	增加按钮样式
edit-icon-class	编辑按钮样式
delete-icon-class	删除按钮样式

数据格式

interface TreeNode {
  id: string;           // 唯一标识
  label: string;        // 显示文本
  disabled?: boolean;   // 是否禁用
  children?: TreeNode[];// 子节点数组
}