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

组织架构树形选择组件使用说明（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数据格式符合组件要求，示例如下：

exportconsttreeNode=[{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 的跨平台能力，可广泛应用于企业级小程序管理系统中。

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