树形结构组件，支持选择、级联、异步加载、搜索过滤与插槽定制等能力。

平台差异说明

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>

页面源码地址

 github  gitee

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	自定义每行内容