组织架构树形选择组件使用说明（Vue3 + UniApp）

Vue3+UniApp树形选择组件

原创于 2025-10-16 08:54:01 发布 · 1.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#钉钉 #微信小程序 #notepad++

文章目录

组织架构树形选择组件使用说明（Vue3 + UniApp）
- 1. 效果预览
- 2. 核心功能
- 3. 代码实现
- - 1. 模板部分（Template）
  - 2. 脚本部分（Script）
- 4. 数据结构示例（`data.js`）
- 5. 插件市场链接
- 使用建议
- 6.总结

组织架构树形选择组件使用说明（Vue3 + UniApp）

本文介绍如何在 UniApp 项目中使用 select-tree-zhikuany 组件实现组织架构的树形展示与选择功能，支持多选、反选，并可通过事件回调返回选中数据。适用于微信小程序等多端场景。

1. 效果预览

以下为组件在实际项目中的展示效果：

组织架构树形选择效果图1

组织架构树形选择效果图2

图：树形结构清晰展示部门层级，支持节点展开/收起、勾选操作。

2. 核心功能

树形结构展示组织架构
支持多选 / 单选模式
可配置是否允许取消选择（isCheck）
选中后可通过 $emit 回传数据至上级页面
基于 Vue3 <script setup> 语法糖开发，兼容 UniApp 框架

3. 代码实现

1. 模板部分（Template）

<template>
  <view>
    <!-- 动态渲染树形选择组件 -->
    <select-tree
      :checkList="checkList"
      v-if="tree.length > 0"
      :options="prop"
      @sendValue="confirm"
      :isCheck="isCheck"
      :treeNone="tree"
    />
  </view>
</template>

⚠️ 注意：v-if="tree.length > 0" 确保数据加载完成后再渲染组件，避免空数据导致异常。

2. 脚本部分（Script）

<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 = ref<any>([])            // 组织架构树数据
  const prop = ref<any>(null)          // 组件配置项
  const isCheck = ref<boolean>(false)  // 是否支持取消选择

  // 接收页面传参
  const queryData = defineProps<{
    prop?: string
  }>()

  // 页面加载时初始化参数
  onLoad((params) => {
    console.log('页面加载参数:', params)

    if (params.prop) {
      prop.value = JSON.parse(params.prop)
      isCheck.value = prop.value.isCheck ?? false
    }

    // 设置组织架构树数据
    tree.value = treeNode
    console.log('组织架构数据:', tree.value)
  })

  /**
   * 处理选中值的回调函数
   * @param val - 选中的节点数组
   * @param back - 是否触发返回上一页逻辑
   */
  const confirm = (val: any, back: boolean) => {
    console.log('选中数据:', val)
    if (back) {
      backConfirm(val)
    } else {
      uni.showToast({
        title: JSON.stringify(val),
        icon: 'none',
        duration: 2000
      })
    }
  }

  /**
   * 返回上一页并传递选中数据
   * @param val - 选中的组织架构节点
   */
  const backConfirm = (val: any) => {
    uni.$emit('selectSuccess', { list: val })
    uni.navigateBack()
  }
</script>

4. 数据结构示例（`data.js`）

确保 treeNode 数据格式符合组件要求，示例如下：

export const treeNode = [
  {
    id: 1,
    label: '公司总部',
    children: [
      {
        id: 2,
        label: '技术部',
        children: [
          { id: 5, label: '前端组' },
          { id: 6, label: '后端组' }
        ]
      },
      {
        id: 3,
        label: '人事部'
      }
    ]
  }
]