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

文章目录

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

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

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

1. 效果预览

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

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

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: '人事部'
      }
    ]
  }
]

✅ 节点字段可根据 prop 配置进行映射（如 labelKey, valueKey, childrenKey）。

5. 插件市场链接

本组件基于 select-tree-zhikuany（Vue3 版本） 开发，已在 UniApp 插件市场发布，支持微信小程序及其他端。

👉 点击前往插件详情页下载与文档查看

使用建议

1. 传参规范 ：通过页面跳转时使用 ?prop=${encodeURIComponent(JSON.stringify(config))} 传递配置。
2. 事件通信 ：利用 uni.$emit('selectSuccess', data) 实现跨页面数据传递。
3. 性能优化：对于大型组织架构，建议添加虚拟滚动或懒加载功能。
4. 类型安全 ：可进一步定义 treeNode 和 prop 的 TypeScript 接口以提升可维护性。

6.总结

该方案通过封装良好的树形选择组件，实现了组织架构的可视化选择，具备良好的扩展性和用户体验。结合 UniApp 的跨平台能力，可广泛应用于企业级小程序管理系统中。

如有疑问或定制需求，欢迎参考插件文档或联系作者。