t-tree

Tree 树形控件

组件介绍

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

平台兼容

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

基础用法

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

<template>
  <view class="tree-demo">
    <t-tree 
      :list="treeData"
      v-model:selects="selectedIds"
      :folds="expandedIds"
      :accordion="true"
      :showCheckbox="true"
      @change="onChange"
      @add="onAdd"
      @edit="onEdit"
      @delete="onDelete">
    </t-tree>
  </view>
</template>

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

const selectedIds = ref([]);
const expandedIds = ref(['1']);

function onChange(selected) {
  console.log('选中项:', selected);
}

function onAdd(item) {
  console.log('添加节点:', item);
}

function onEdit(item) {
  console.log('编辑节点:', item);
}

function onDelete(item) {
  console.log('删除节点:', item);
}
</script>

<style scoped>
.tree-demo {
  padding: 20rpx;
}
</style>

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	''

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[];// 子节点数组
}