更新记录

1.0.0（2026-08-06） 下载此版本

新增

• 基于 uni-app x Composition API + UTS 开发的跨平台无限级树形组件
• 递归节点自渲染，支持任意层级树形数据，零性能损耗的扁平索引
• 展开/折叠节点，折叠时整棵子树不渲染（v-if），大幅减少 DOM 节点
• 手风琴模式，同一层级仅允许一个节点展开
• Checkbox 多选模式，支持父子联动（级联选中/半选）或严格不联动
• 节点点击选中高亮，支持受控（selectedKey）和非受控两种模式
• 异步懒加载（loadData），带加载中状态提示，自动防重复加载
• 纯 CSS 箭头图标（border 三角 + transform rotate），无图片/字体图标依赖
• 跨平台兼容：App（Android / iOS / Harmony）、Web、微信小程序

平台兼容性

uni-app(4.87)

uni-app x(4.87)

jack-tree-ui 无限级树形组件

兼容各端（Android / iOS / Harmony、Web、微信小程序）的无限级树形组件。基于 provide/inject 通信，递归节点自渲染，折叠时子树完全挂载移除（v-if），大规模数据场景性能可控。

特性

• 无限递归：任意层级嵌套，节点组件自引用
• 展开/折叠：v-if 控制子树挂载，折叠状态下零 DOM 开销
• 手风琴模式：accordion 开启后同级节点仅一个展开
• 多选复选框：支持父子联动（级联选中 + 半选态）或严格不联动
• 节点选中：点击高亮，受控 / 非受控均可
• 异步懒加载：loadData 回调加载子节点，内置 loading 防重复
• 扁平索引：Map 存储全量节点，O(1) 查找任意节点
• 零外部依赖：纯 CSS 箭头图标，不依赖 uni-icons 等三方组件
• 跨平台一致：App（Android / iOS / Harmony）、Web、微信小程序

属性 Props

事件 Events

方法 Expose

通过 ref 获取组件实例后调用。

使用示例

基础用法

<template>
  <jack-tree-ui
    :data="treeData"
    @node-click="onNodeClick"
  />
</template>
<script lang="uts" setup>
import { ref } from 'vue'

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

function onNodeClick(e: { node: any, expanded: boolean }): void {
  console.log('clicked:', e.node.label)
}
</script>

多选模式

<template>
  <jack-tree-ui
    ref="treeRef"
    :data="treeData"
    :showCheckbox="true"
    @node-check="onNodeCheck"
  />
</template>
<script lang="uts" setup>
import { ref } from 'vue'

const treeRef = ref(null)

function onNodeCheck(e: { checkedKeys: string[], checkedNodes: any[], node: any, checked: boolean }): void {
  console.log('勾选列表:', e.checkedKeys)
}

function getSelected(): void {
  const keys = treeRef.value?.getCheckedKeys()
  console.log('当前勾选:', keys)
}
</script>

手风琴 + 懒加载

<template>
  <jack-tree-ui
    :data="treeData"
    :accordion="true"
    :loadData="loadChildren"
    @load-data-success="onLoadSuccess"
  />
</template>
<script lang="uts" setup>
import { ref } from 'vue'

const treeData = ref([
  { id: '1', label: '异步节点', lazy: true, children: [] }
])

function loadChildren(node: any): Promise<any[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: node.id + '-1', label: '加载的子节点-1' },
        { id: node.id + '-2', label: '加载的子节点-2' }
      ])
    }, 500)
  })
}

function onLoadSuccess(e: { parentNode: any, children: any[] }): void {
  console.log('加载完成:', e.children.length, '个子节点')
}
</script>

数据结构 TreeNode

type TreeNode = {
  id: string          // 唯一标识（字段名由 nodeKey 指定）
  label: string       // 显示文本（字段名由 labelField 指定）
  children: TreeNode[] // 子节点列表（字段名由 childrenField 指定）
  disabled: boolean   // 是否禁用
  lazy: boolean       // 是否懒加载
  checked: boolean    // 勾选状态（组件内部管理）
  indeterminate: boolean // 半选状态（组件内部管理）
  [key: string]: any  // 允许扩展自定义字段
}

平台兼容

注意事项

• Vapor 模式限制：CSS transition 不支持，展开/折叠为瞬时切换（非缺陷，框架限制）
• 选择器限制：仅支持 class 选择器，必须为每个需要样式的元素指定 class
• 文字样式：必须直接写在 <text> 组件上，不支持从父级继承
• 默认布局：flex 布局，flex-direction 默认 column，box-sizing 默认 border-box
• 大数据场景：折叠子树不渲染，实测万级节点展开数百行时性能良好；如需全展开超大数据集，建议搭配虚拟列表