更新记录

1.0.0（2026-02-02） 下载此版本

• 基础树形展示：支持多层级数据展示，展开/折叠。
• 自定义插槽：支持自定义节点内容和图标。
• 拖拽排序：支持长按节点进行拖拽排序（可开关）。
• 选择功能：支持复选框（Checkbox）和单选框（Radio）模式。
• 父子联动：复选框模式下支持父子节点选中状态联动（可配置独立选择）。
• 操作交互：内置编辑和删除按钮操作。
• 样式美观：简洁现代的 UI 设计，支持半选状态（Indeterminate）。

平台兼容性

uni-app(3.6.16)

x-tree 树形组件

x-tree 是一个功能丰富的 Vue 2 树形组件，专为 Uni-app 开发。它支持自定义节点、图标、拖拽排序（长按）、节点编辑/删除、复选框/单选框选择等功能。

功能特性

• 基础树形展示：支持多层级数据展示，展开/折叠。
• 自定义插槽：支持自定义节点内容和图标。
• 拖拽排序：支持长按节点进行拖拽排序（可开关）。
• 选择功能：支持复选框（Checkbox）和单选框（Radio）模式。
• 父子联动：复选框模式下支持父子节点选中状态联动（可配置独立选择）。
• 操作交互：内置编辑和删除按钮操作。
• 样式美观：简洁现代的 UI 设计，支持半选状态（Indeterminate）。

引入组件

在 pages.json 中配置 easycom 或在页面中手动引入：

import xTree from '@/components/x-tree/x-tree.vue';

export default {
    components: {
        xTree
    }
}

基本用法

<template>
    <x-tree 
        :data="treeData" 
        :check-type="'checkbox'"
        :draggable="true"
        @edit="handleEdit" 
        @delete="handleDelete"
        @node-drop="handleDrop"
        @check-change="handleCheckChange"
    >
    </x-tree>
</template>

API

Props 属性

Events 事件

Slots 插槽

插槽示例

<x-tree :data="list">
    <!-- 自定义图标 -->
    <template v-slot:icon="{ item }">
        <text v-if="item.type === 'folder'">📂</text>
        <text v-else>📄</text>
    </template>

    <!-- 自定义内容 -->
    <template v-slot:default="{ item }">
        <text style="color: blue;">{{ item.label }}</text>
        <text style="font-size: 10px; color: #999;">(ID: {{ item.id }})</text>
    </template>
</x-tree>

数据结构 (Data Prop)

data 属性接受一个对象数组，每个对象应包含以下字段：

[
    {
        id: 1,                  // 唯一标识
        label: 'Node 1',        // 显示文本
        expanded: true,         // 是否展开 (可选, 默认 true)
        checked: false,         // 是否选中 (可选)
        children: [             // 子节点数组
            {
                id: 11,
                label: 'Child 1-1'
            }
        ]
    }
]

注意事项

1. 拖拽排序：开启 draggable 后，用户需长按节点约 300ms 触发拖拽状态。
2. 样式定制：组件内部使用了 scoped 样式，如需覆盖请使用深度选择器 ::v-deep。
3. 性能：组件内部将树形数据扁平化为列表渲染，以优化长列表性能并简化拖拽计算。