更新记录

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

版本调整

建议更新，但需要注意，异步数据的时候，后台需返回 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. 其它更多优化

1.3.4（2023-07-27） 下载此版本

优化

1. 优化图标字体命名

1.3.3（2023-07-13） 下载此版本

版本同步于 Vue3 版，查看 Vue3 版更新日志

平台兼容性

da-tree-vue2

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

内容同步于 Vue3 版本，在此查看 ===> Vue3 版

与 Vue3 版本版本不同的是，此版本兼容更全面，比如 360 小程序、快应用等均支持

关于使用

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

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

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

组件示例

<template>
  <view>
    <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>
    <DaTreeVue2
      ref="DaTreeRef"
      :data="roomTreeData"
      labelField="name"
      valueField="id"
      defaultExpandAll
      showCheckbox
      :defaultCheckedKeys="defaultCheckedKeysValue"
      @change="handleTreeChange"
      @expand="handleExpandChange" />

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

/**
 * 模拟创建一个接口数据
 */
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 DaTreeVue2 from '@/components/da-tree-vue2/index.vue'
export default {
  components: { DaTreeVue2 },
  data() {
    return {
      GetApiData,
      // key的类型必须对应树数据key的类型
      defaultCheckedKeysValue: ['211', '222'],
      defaultCheckedKeysValue2: '222',
      defaultExpandKeysValue3: ['212', '231'],
      roomTreeData: [
        {
          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: '更多示例，请下载示例项目查看',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  methods: {
    doExpandTree(keys, expand) {
      this.$refs.DaTreeRef?.setExpandedKeys(keys, expand)

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

      const gek = this.$refs.DaTreeRef?.getCheckedKeys()
      console.log('当前已选中的KEY ==>', gek)
    },
    handleTreeChange(allSelectedKeys, currentItem) {
      console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
    },
    handleExpandChange(expand, currentItem) {
      console.log('handleExpandChange ==>', expand, currentItem)
    },
  },
}

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

组件参数

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

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

组件事件

组件方法

组件版本

v1.4.1

差异化

已通过测试

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

未测试

• 快手小程序由于非企业用户暂无演示

开发组

@CRLANG