Tui Plus Vapor

Appearance

# t-tree-item

TreeItem 树形项

t-tree-item 组件介绍 ​

t-tree-item 是树形结构的子组件，用于递归渲染单个树节点及其子级，必须配合 t-tree 使用。支持展开折叠、复选框选择、懒加载、编辑删除等功能。

t-tree-item 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-tree-item 基础用法 ​

t-tree-item 作为 t-tree 的内部组件，通常不需要直接使用。t-tree 会自动递归渲染 t-tree-item。

vue
<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-item Props ​

属性名说明类型默认值
itemData当前节点的数据对象UTSJSONObject{}
sortIndex节点排序索引number0
selects选中的节点 ID 数组string[][]
folds折叠的节点 ID 数组string[][]
list树形数据列表UTSJSONObject[][]
accordion是否手风琴模式booleanfalse
load懒加载函数(node) => Promise<UTSJSONObject[]>-
showCheckbox是否显示复选框booleantrue
lazy是否开启懒加载booleanfalse
showAddButton是否显示添加按钮booleantrue
addIcon添加按钮图标string'plus-circle'
addIconClass添加按钮图标样式string''
showEditButton是否显示编辑按钮booleantrue
editIcon编辑按钮图标string'edit-pen'
editIconClass编辑按钮图标样式string''
showDeleteButton是否显示删除按钮booleantrue
deleteIcon删除按钮图标string'trash'
deleteIconClass删除按钮图标样式string''
rowHeight行高number50
idKey节点唯一标识字段名string'id'
labelKey节点标签字段名string'label'
disabledKey禁用状态字段名string'disabled'
childrenKey子节点字段名string'children'

t-tree-item Events ​

事件名说明回调参数
edit点击编辑按钮时触发(node: UTSJSONObject) => void
delete点击删除按钮时触发(node: UTSJSONObject) => void
add点击添加按钮时触发(node: UTSJSONObject) => void

数据结构 ​

typescript
interface TreeNode {
  id: string
  label: string
  disabled?: boolean
  children?: TreeNode[]
}