更新记录

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

新增

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

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

修复

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

1.4.0（2023-08-17） 下载此版本

版本调整

建议更新，但需要注意，异步数据的时候，后台需返回 leaf 字段来判断是否末项数据

1. 调整数据项格式，新增 leaf 字段，来判断是否为末节点
2. 调整数据项格式，新增 sort 字段，来排序节点位置
3. 注意：异步加载数据，当为末项的时候，需要服务端数据返回 leaf 字段
4. 新增 alwaysFirstLoad ，即异步数据总会在第一次展开节点时，拉取一次后台数据，来比对是否一致
5. 拆分 field 属性，注意： 1.5.0 版本后将移除 field 属性
6. 新增 labelField 同 field.label，指定节点对象中某个属性为标签字段，默认label
7. 新增 valueField 同 field.key，指定节点对象中某个属性为值字段，默认value
8. 新增 childrenField 同 field.children，指定节点对象中某个属性为子树节点字段，默认children
9. 新增 disabledField 同 field.disabled，指定节点对象中某个属性为禁用字段，默认disabled
10. 新增 appendField 同 field.append，指定节点对象中某个属性为副标签字段，默认append
11. 新增 leafField 同 field.label，指定节点对象中某个属性为末级节点字段，默认leaf
12. 新增 sortField 同 field.label，指定节点对象中某个属性为排序字段，默认sort
13. 新增 isLeafFn ，用来自定义控制数据项的末项
14. 更多的项目示例
15. 支持单选取消选中
16. 修复节点展开时可能存在的 bug
17. 修复节点选择可能存在的 bug
18. 调整为子节点默认继承父节点禁用属性
19. setExpandedKeys 添加参数一为 all 即可支持一键展开/收起全部节点
20. 其它更多优化

平台兼容性

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>
  <DaTree
    ref="DaTreeRef"
    :data="roomTreeData"
    labelField="name"
    valueField="id"
    defaultExpandAll
    showCheckbox
    :defaultCheckedKeys="defaultCheckedKeysValue"
    @change="handleTreeChange"
    @expand="handleExpandChange"></DaTree>
  <view>单选</view>
  <DaTree
    :data="roomTreeData"
    labelField="name"
    valueField="id"
    defaultExpandAll
    :defaultCheckedKeys="defaultCheckedKeysValue2"
    @change="handleTreeChange"
    @expand="handleExpandChange"></DaTree>
  <view>默认展开指定节点</view>
  <DaTree
    :data="roomTreeData"
    labelField="name"
    valueField="id"
    showCheckbox
    :defaultExpandedKeys="defaultExpandKeysValue3"
    @change="handleTreeChange"
    @expand="handleExpandChange"></DaTree>
  <view>异步加载数据</view>
  <DaTree
    :data="roomTreeData"
    labelField="name"
    valueField="id"
    showCheckbox
    loadMode
    :loadApi="GetApiData"
    defaultExpandAll
    @change="handleTreeChange"
    @expand="handleExpandChange"></DaTree>
</template>

import { defineComponent, ref } from 'vue'

/**
 * 模拟创建一个接口数据
 */
function GetApiData(currentNode) {
  const { key } = currentNode

  return new Promise((resolve) => {
    setTimeout(() => {
      // 模拟返回空数据
      if (key.indexOf('-') > -1) {
        return resolve(null)
        // return resolve([])
      }

      return 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}-3`,
          append: '被禁用，无展开图标',
          disabled: true,
        },
      ])
    }, 2000)
  })
}

import DaTree from '@/components/da-tree/index.vue'
export default defineComponent({
  components: { DaTree },
  setup() {
    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 doExpandTree(keys, expand) {
      DaTreeRef.value?.setExpandedKeys(keys, expand)

      const gek = DaTreeRef.value?.getExpandedKeys()
      console.log('当前已展开的KEY ==>', gek)
    }
    function doCheckedTree(keys, checked) {
      DaTreeRef.value?.setCheckedKeys(keys, checked)

      const gek = DaTreeRef.value?.getCheckedKeys()
      console.log('当前已选中的KEY ==>', gek)
    }
    function handleTreeChange(allSelectedKeys, currentItem) {
      console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
    }
    function handleExpandChange(expand, currentItem) {
      console.log('handleExpandChange ==>', expand, currentItem)
    }
    return {
      DaTreeRef,
      roomTreeData,
      defaultCheckedKeysValue,
      defaultCheckedKeysValue2,
      defaultExpandKeysValue3,
      handleTreeChange,
      handleExpandChange,
      GetApiData,
      doExpandTree,
      doCheckedTree,
    }
  },
})

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

组件参数

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

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

组件事件

组件方法

组件版本

v1.4.2

差异化

已通过测试

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

未测试

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

开发组

@CRLANG