uview-plus

# 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() 方法获取当前选中数据

← Color 色彩 →