# Tree 树形组件 3.4.47

树形组件用于展示具有层级结构的数据，支持复选框、展开/折叠、节点点击等交互行为。

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

# 基本使用

<template>
  <u-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
        nodeKey: 'id'
      },
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 2,
              label: '二级 1-1',
              children: [
                { id: 3, label: '三级 1-1-1' },
                { id: 4, label: '三级 1-1-2' }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleNodeClick(node) {
      console.log('节点被点击:', node);
    }
  }
};
</script>

# 复选框及自定义内容

<template>
  <up-tree
    :data="treeData"
    :props="defaultProps"
    show-checkbox
    default-expand-all
    @node-click="handleNodeClick"
    @check-change="handleCheckChange">
    <template #default="{ node, level }">
        <view class="custom-tree-node">
            <text style="color: red">{{ node.label }}*{{level}}</text>
        </view>
    </template>
  </up-tree>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
        nodeKey: 'id'
      },
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 2,
              label: '二级 1-1',
              children: [
                { id: 3, label: '三级 1-1-1' },
                { id: 4, label: '三级 1-1-2' }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleNodeClick(node) {
      console.log('节点被点击:', node);
    }
  }
};
</script>

# 📄 Props 参数说明

参数	说明	类型	默认值	可选值
data	树的数据源	`Array`	`[]`	-
props	配置节点字段映射（如 label、children）	[Object](file:///Users/jry/Documents/www/Ai/dify/web/app/components/workflow/panel/chat-variable-panel/type.ts#L3-L3)	`{ label: 'label', children: 'children', nodeKey: 'id' }`	-
show-checkbox	是否显示复选框	`Boolean`	`false`	`true / false`
default-expand-all	是否默认展开所有节点	`Boolean`	`false`	`true / false`
expand-on-click-node	是否在点击节点时展开或折叠	`Boolean`	`true`	`true / false`
check-strictly	是否启用父子节点不关联选择	`Boolean`	`false`	`true / false`
node-key	每个节点的唯一标识字段名	[String](file:///Users/jry/Documents/www/Ai/dify/web/app/components/workflow/panel/chat-variable-panel/type.ts#L2-L2)	`'id'`	-

# 📢 Events 事件说明

事件名	说明	参数
@node-click	点击节点时触发	[node](file:///Users/jry/Documents/www/Ai/dify/api/core/workflow/nodes/llm/node.py#L0-L0)
@check-change	节点勾选状态变化时触发	[node](file:///Users/jry/Documents/www/Ai/dify/api/core/workflow/nodes/llm/node.py#L0-L0)

# 📢 Ref 事件说明

| getCheckedNodes | 获取当前选中节点列表（方法调用）| nodes[] |

# 🧩 插槽说明（Slot）

插槽名	说明	参数
default	自定义节点内容插槽	`{ node, level }`

# 示例：自定义节点内容

<up-tree :data="treeData" show-checkbox>
  <template #default="{ node, level }">
    <text style="color: red;">[层级 {{ level }}] {{ node.label }}</text>
  </template>
</up-tree>

# ✅ 方法说明

方法名	说明	返回值
getCheckedNodes()	获取当前所有选中的节点列表	`nodes[]`

# 使用方式：

<template>
  <u-tree ref="treeRef" :data="treeData" show-checkbox />
  <u-button @click="logChecked">打印选中节点</u-button>
</template>

<script>
export default {
  methods: {
    logChecked() {
      const nodes = this.$refs.treeRef.getCheckedNodes();
      console.log('当前选中节点:', nodes);
    }
  }
};
</script>

# ✅ 支持的功能特性

功能	说明
展开/折叠	支持点击箭头或配置 `expand-on-click-node` 控制展开逻辑
复选框联动	父子节点自动同步勾选状态（除非开启 `check-strictly`）
数据初始化	自动注入 `expanded` 和 `checked` 字段
自定义渲染	通过插槽实现节点内容高度定制
获取选中节点	提供 `getCheckedNodes()` 方法获取当前选中数据

← Pagination 分页器 CityLocate 城市定位选择组件文档 →