外观
Tree 树形组件
约 1010 字大约 3 分钟
2025-10-31
树形结构组件,支持选择、级联、异步加载、搜索过滤与插槽定制等能力。
平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
基本使用
<template>
<u-tree
:data="basicData"
:default-expanded-keys="['1','1-1']"
expand-on-click
checkable
/>
</template>
<script>
export default {
data() {
return {
basicData: [
{
label: '技术部',
key: '1',
children: [
{
label: '前端组',
key: '1-1',
children: [
{
label: 'Vue开发',
key: '1-1-1',
children: [
{ label: '组件库开发', key: '1-1-1-1' },
{ label: '页面开发', key: '1-1-1-2' }
]
},
{
label: 'React开发',
key: '1-1-2',
children: [
{ label: 'Hooks开发', key: '1-1-2-1' },
{ label: '状态管理', key: '1-1-2-2' }
]
}
]
},
{
label: '后端组',
key: '1-2',
children: [
{ label: 'Java开发', key: '1-2-1' },
{ label: 'Python开发', key: '1-2-2' },
{ label: '数据库设计', key: '1-2-3' }
]
}
]
}
]
}
}
}
</script>隐藏箭头
<u-tree
:data="basicData"
:default-expanded-keys="['1','1-1']"
:show-switcher="false"
expand-on-click
checkable
/>自定义图标
<u-tree
:data="basicData"
:default-expanded-keys="['1','1-1']"
expand-icon="plus"
collapse-icon="minus"
expand-on-click
selectable
/>自定义字段名
<u-tree
:data="customFieldData"
:default-expanded-keys="['1','1-1']"
key-field="id"
label-field="name"
children-field="items"
selectable
/>级联选择
<template>
<view>
<u-tree
:data="cascadeData"
cascade
:default-expanded-keys="['0','0-0','0-1','0-2']"
:default-checked-keys="['0-0-0']"
@checked="updateCheckedKeys"
checkable
/>
<text>已选中: {{ checkedKeys.join(', ') || '无' }}</text>
</view>
</template>搜索过滤
<un-input v-model="searchPattern" placeholder="输入节点名称搜索" :clearable="true" />
<u-tree
:data="searchData"
expand-on-click
:pattern="searchPattern"
:show-irrelevant-nodes="showIrrelevantNodes"
/>异步加载
<u-tree
:data="asyncData"
:load-node="loadNodeData"
/>export default {
methods: {
loadNodeData(node) {
return new Promise((resolve) => {
setTimeout(() => {
if (node.key === '1') {
node.children = [
{ label: 'Vue.js 基础教程', key: '1-1', isLeaf: true },
{ label: 'React 入门指南', key: '1-2', isLeaf: true },
{ label: 'TypeScript 实战', key: '1-3', isLeaf: true }
]
} else if (node.key === '2') {
node.children = [
{ label: 'API 接口文档', key: '2-1' },
{ label: '组件使用说明', key: '2-2' },
{ label: '最佳实践指南', key: '2-3' }
]
} else if (node.key === '3') {
node.children = [
{ label: 'UI 组件库', key: '3-1' },
{ label: '工具函数库', key: '3-2' },
{ label: '示例项目', key: '3-3' }
]
}
resolve(true)
}, 1000)
})
}
}
}插槽自定义
<u-tree
:data="slotData"
:default-expanded-keys="['1']"
>
<template #switcher="{ hide, expanded }">
<view v-if="!hide" class="custom-switcher">
<un-icon :name="expanded ? 'arrow-down' : 'arrow-right'" size="12" />
</view>
</template>
<template #content="{ node }">
<view class="custom-content">
<text class="custom-label">{{ node.label }}</text>
<text class="custom-tag" v-if="node.tag">{{ node.tag }}</text>
</view>
</template>
</u-tree>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 树数据 | Array | [] |
| label-field | 节点文本字段名 | String | label |
| children-field | 子节点字段名 | String | children |
| is-leaf-field | 叶子节点字段名 | String | isLeaf |
| disabled-field | 禁用字段名 | String | disabled |
| default-checked-keys | 默认选中的 keys | Array | [] |
| default-expanded-keys | 默认展开的 keys | Array | [] |
| checked-keys | 受控:选中的 keys | Array | - |
| expanded-keys | 受控:展开的 keys | Array | - |
| checkable | 是否显示复选框 | Boolean | false |
| selectable | 是否允许选中样式 | Boolean | false |
| cascade | 勾选是否级联父子 | Boolean | false |
| expand-on-click | 点击内容是否展开/收起 | Boolean | false |
| check-on-click | 点击内容是否勾选/取消 | Boolean | false |
| load-node | 懒加载函数 (node)=>Promise | Function | - |
| allow-checking-not-loaded | 允许勾选未加载节点 | Boolean | false |
| pattern | 搜索关键字(忽略大小写) | String | '' |
| show-irrelevant-nodes | 搜索时是否显示无关节点 | Boolean | true |
| indent-width | 子级缩进宽度 | Number/String | 24 |
| show-switcher | 是否显示展开/收起图标 | Boolean | true |
| expand-icon | 展开图标名 | String | arrow-right-fill |
| collapse-icon | 收起图标名 | String | arrow-down-fill |
| loading-color | 加载中图标颜色 | String | - |
| checked-color | 复选框选中颜色 | String | - |
| rotatable-switcher | 切换图标是否旋转 | Boolean | false |
| highlight-bg-color | 搜索命中高亮背景 | String | '' |
| selected-bg-color | 选中行背景色 | String | '' |
| switcher-size | 切换图标大小 | Number/String | 14 |
| switcher-color | 切换图标颜色 | String | #909399 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| checked | 勾选状态变更 | (checkedKeys: string[]) |
| expanded | 展开状态变更 | (expandedKeys: string[]) |
| update:checked-keys | v-model:checked-keys 同步 | (checkedKeys: string[]) |
| update:expanded-keys | v-model:expanded-keys 同步 | (expandedKeys: string[]) |
Slot
| 名称 | 说明 |
|---|---|
| switcher | 自定义切换图标区域 |
| content | 自定义每行内容 |
