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