更新记录

1.4.3（2026-03-15） 下载此版本

文档修复与优化

1. 修复 loadApi 属性说明错误（错写为 checkboxPlacement 的说明）
2. 修复 onlyRadioLeaf 默认值错误（readme 写 true，实际默认值为 false）
3. 组件示例改为 <script setup lang="ts"> 风格，组件名改为 kebab-case，属性改为 kebab-case
4. 移除示例中冗余的 import 和 export default defineComponent

1.4.2（2023-10-25） 下载此版本

新增

1. 新增filterValue属性，支持搜索并筛选树结构的内容

1.4.1（2023-08-18） 下载此版本

修复

1. 修复单选 onlyRadioLeaf 时末级节点无法选中的 bug

平台兼容性

uni-app(4.0)

da-tree

一个基于 Vue3 的 tree(树)组件，同时支持主题换色，可能是最适合你的 tree(树)组件

组件一直在更新，遇到问题可在下方讨论。

同时更新 Vue2 版本，在此查看 ===> Vue2 版

关于使用

可在右侧的使用 HBuilderX 导入插件或下载示例项目ZIP，方便快速上手。

可通过下方的示例及文档说明，进一步了解使用组件相关细节参数。

插件地址：https://ext.dcloud.net.cn/plugin?id=12384

组件示例

<template>
  <view>多选</view>
  <view><button @click="doCheckedTree(['2'], true)">全选</button></view>
  <view><button @click="doCheckedTree(['2'], false)">取消全选</button></view>
  <view><button @click="doCheckedTree(['211', '222'], true)">选中指定节点</button></view>
  <view><button @click="doCheckedTree(['211', '222'], false)">取消选中指定节点</button></view>
  <view><button @click="doExpandTree('all', true)">展开全部节点</button></view>
  <view><button @click="doExpandTree('all', false)">收起全部节点</button></view>
  <view><button @click="doExpandTree(['22', '23'], true)">展开节点</button></view>
  <view><button @click="doExpandTree(['22', '23'], false)">收起节点</button></view>
  <da-tree
    ref="daTreeRef"
    :data="roomTreeData"
    label-field="name"
    value-field="id"
    default-expand-all
    show-checkbox
    :default-checked-keys="defaultCheckedKeysValue"
    @change="handleTreeChange"
    @expand="handleExpandChange"
  />
  <view>单选</view>
  <da-tree
    :data="roomTreeData"
    label-field="name"
    value-field="id"
    default-expand-all
    :default-checked-keys="defaultCheckedKeysValue2"
    @change="handleTreeChange"
    @expand="handleExpandChange"
  />
  <view>默认展开指定节点</view>
  <da-tree
    :data="roomTreeData"
    label-field="name"
    value-field="id"
    show-checkbox
    :default-expanded-keys="defaultExpandKeysValue3"
    @change="handleTreeChange"
    @expand="handleExpandChange"
  />
  <view>异步加载数据</view>
  <da-tree
    :data="roomTreeData"
    label-field="name"
    value-field="id"
    show-checkbox
    load-mode
    :load-api="GetApiData"
    default-expand-all
    @change="handleTreeChange"
    @expand="handleExpandChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const daTreeRef = ref()
// key的类型必须对应树数据key的类型
const defaultCheckedKeysValue = ref(['211', '222'])
const defaultCheckedKeysValue2 = ref('222')
const defaultExpandKeysValue3 = ref(['212', '231'])
const roomTreeData = ref([
  {
    id: '2',
    name: '行政中心',
    children: [
      {
        id: '21',
        name: '行政部',
        children: [
          { id: '211', name: '行政一部', children: null },
          { id: '212', name: '行政二部', children: [], disabled: true },
        ],
      },
      {
        id: '22',
        name: '财务部',
        children: [
          { id: '221', name: '财务一部', children: [], disabled: true },
          { id: '222', name: '财务二部', children: [] },
        ],
      },
      {
        id: '23',
        name: '人力资源部',
        children: [
          { id: '231', name: '人力一部', children: [] },
          { id: '232', name: '人力二部', append: '更多示例，请下载示例项目查看' },
        ],
      },
    ],
  },
])

function GetApiData(currentNode: any) {
  const { key } = currentNode
  return new Promise((resolve) => {
    setTimeout(() => {
      if (key.indexOf('-') > -1) return resolve(null)
      resolve([
        { id: `${key}-1`, name: `行政部X${key}-1` },
        { id: `${key}-2`, name: `财务部X${key}-2`, append: '定义了末项数据', leaf: true },
        { id: `${key}-3`, name: `资源部X${key}-3` },
        { id: `${key}-4`, name: `资源部X${key}-4`, append: '被禁用', disabled: true },
      ])
    }, 2000)
  })
}

function doExpandTree(keys: string | string[], expand: boolean) {
  daTreeRef.value?.setExpandedKeys(keys, expand)
  console.log('当前已展开的KEY ==>', daTreeRef.value?.getExpandedKeys())
}

function doCheckedTree(keys: string[], checked: boolean) {
  daTreeRef.value?.setCheckedKeys(keys, checked)
  console.log('当前已选中的KEY ==>', daTreeRef.value?.getCheckedKeys())
}

function handleTreeChange(allSelectedKeys: any, currentItem: any) {
  console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
}

function handleExpandChange(expand: boolean, currentItem: any) {
  console.log('handleExpandChange ==>', expand, currentItem)
}
</script>

更多示例请下载/导入示例项目 ZIP 查看

组件参数

field 格式(1.5.0 后移除，请用单独的字段匹配)

{
  label: 'label',
  key: 'key',
  children: 'children',
  disabled: 'disabled',
  append: 'append'
}

组件事件

组件方法

组件版本

v1.4.3

差异化

已通过测试

• H5 页面
• 微信小程序
• 支付宝、钉钉小程序
• 字节跳动、抖音、今日头条小程序
• 百度小程序
• 飞书小程序
• QQ 小程序
• 京东小程序

未测试

• 快手小程序由于非企业用户暂无演示
• 快应用、360 小程序因 Vue3 支持的原因暂无演示

开发组

@CRLANG