更新记录

1.0.2（2025-09-10） 下载此版本

修复vue3事件发送的引发的问题

1.0.1（2025-09-10） 下载此版本

支持非选择模式

1.0.0（2025-09-10） 下载此版本

新建项目

平台兼容性

uni-app(4.07)

uni-app x(4.07)

select-tree-vue3

介绍

仿钉钉组织架构展示，支持多选单选和非选择模式

使用说明

<view>
    <select-tree :checkList="checkList" v-if="tree.length>0" :options="prop" @sendValue="confirm" :isCheck="isCheck"
    :treeNone="tree"></select-tree>
</view>

<script setup lang="ts">
    import SelectTree from '@/components/select-tree-zhikuany/tree.vue'
    import { ref } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
    import { treeNode } from './data.js'

    const checkList = ref([]) //已选择列表
    const tree : any = ref([])//组织架构
    const prop : any = ref() //配置
    const isCheck : any = ref(false)//是否支持否选

    const queryData = defineProps()
    onLoad((params) => {
        console.log('onload', params)
        prop.value = JSON.parse(params.prop)
        isCheck.value = prop.value.isCheck
        console.log(isCheck.value)
        tree.value = treeNode
        console.log(tree.value)
    })

    //获取选中的值
    const confirm = (val : any, back : any) => {
        console.log(val)
        console.log(back)
        if (back) {
            backConfirm(val)
        } else {
            uni.showToast({
                title: JSON.stringify(val),
                icon: 'none'
            })
        }
    }
    // 返回上一页传参
    const backConfirm = (val : any) => {
        uni.$emit('selectSuccess', { list: val })
        uni.navigateBack();
    }
</script>

组织架构示例

const treeNode = [{
    name: '信息中心',
    id: '1',
    user: false,
    children: [{
        name: '系统开发部',
        id: '1-1',
        user: false,
        children: [{
            name: '供应链组',
            id: '3-1',
            user: false,
            children: [{
                name: '软件开发工程师1',
                id: '3-1-1',
                user: true,

              },
              {
                name: '软件开发工程师2',
                id: '3-1-2',
                user: true,

              }, {
                name: '软件开发工程师3',
                id: '3-1-3',
                user: true,

              },
            ]
          },
          {
            name: '营销组',
            id: '3-1',
            user: false,
            children: [{
                name: '软件开发工程师1',
                id: '3-2-1',
                user: true,

              },
              {
                name: '软件开发工程师2',
                id: '3-2-2',
                user: true,

              }, {
                name: '软件开发工程师3',
                id: '3-2-3',
                user: true,

              },
            ]
          }, {
            name: '生产组',
            id: '3-3',
            user: false,
            children: [{
                name: '软件开发工程师1',
                id: '3-3-1',
                user: true,

              },
              {
                name: '软件开发工程师2',
                id: '3-3-2',
                user: true,

              }, {
                name: '软件开发工程师3',
                id: '3-3-3',
                user: true,

              },
            ]
          }
        ],
      },
      {
        name: '系统实施部',
        id: '1-2',
        user: false,
        children: [{
            name: '供应链组',
            id: '1-2-1',
            user: false,
            children: [{
                name: '实施工程师1',
                id: '1-2-1-1',
                user: true,

              },
              {
                name: '实施工程师2',
                id: '1-2-1-2',
                user: true,

              }, {
                name: '实施工程师3',
                id: '1-2-1-3',
                user: true,

              },
            ]
          },
          {
            name: '营销组',
            id: '1-2-2',
            user: false,
            children: [{
                name: '实施工程师1',
                id: '1-2-2-1',
                user: true,

              },
              {
                name: '实施工程师2',
                id: '1-2-2-2',
                user: true,

              }, {
                name: '实施工程师3',
                id: '1-2-2-3',
                user: true,

              },
            ]
          }, {
            name: '生产组',
            id: '1-2-3',
            user: false,
            children: [{
                name: '实施工程师1',
                id: '1-2-3-1',
                user: true,

              },
              {
                name: '实施工程师2',
                id: '1-2-3-2',
                user: true,

              }, {
                name: '实施工程师3',
                id: '1-2-3-3',
                user: true,

              },
            ]
          }
        ],
      },

    ]
  },
  {
    name: '财务中心',
    id: '2',
    user: false,
    children: [{
        name: '财务部',
        id: '2-1',
        user: false,
        children: [{
            name: '财务专员1',
            id: '2-1-1',
            user: true,
          },{
            name: '财务专员2',
            id: '2-1-2',
            user: true,
          },{
            name: '财务专员3',
            id: '2-1-3',
            user: true,
          },{
            name: '财务专员4',
            id: '2-1-4',
            user: true,
          },{
            name: '财务专员5',
            id: '2-1-5',
            user: true,
          },

        ]
      },
      {
          name: '审计部',
          id: '2-2',
          user: false,
          children: [{
              name: '审计专员1',
              id: '2-2-1',
              user: true,
            },{
              name: '审计专员2',
              id: '2-2-2',
              user: true,
            },{
              name: '审计专员3',
              id: '2-2-3',
              user: true,
            },{
              name: '审计专员4',
              id: '2-2-4',
              user: true,
            },{
              name: '审计专员5',
              id: '2-2-5',
              user: true,
            },

          ]
        },

    ]
  },
]

export {
  treeNode
};