t-tree-item

TreeItem 树形项

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <t-tree :list="treeData" :show-checkbox="true">
  </t-tree>
</template>

<script setup>
const treeData = ref<UTSJSONObject[]>([
  {
    id: '1',
    label: '一级节点',
    children: [
      { id: '2', label: '二级节点 1' },
      { id: '3', label: '二级节点 2' }
    ]
  }
])
</script>

Props

属性名	说明	类型	默认值
itemData	当前节点的数据对象	UTSJSONObject	{}
sortIndex	节点排序索引	number	0
selects	选中的节点 ID 数组	string[]	[]
folds	折叠的节点 ID 数组	string[]	[]
list	树形数据列表	UTSJSONObject[]	[]
accordion	是否手风琴模式	boolean	false
load	懒加载函数	(node) => Promise<UTSJSONObject[]>	-
showCheckbox	是否显示复选框	boolean	true
lazy	是否开启懒加载	boolean	false
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	行高	number	50
idKey	节点唯一标识字段名	string	'id'
labelKey	节点标签字段名	string	'label'
disabledKey	禁用状态字段名	string	'disabled'
childrenKey	子节点字段名	string	'children'

Events

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

数据结构

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