组织架构树形选择组件使用说明（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 = treeNodeconsole.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 的跨平台能力，可广泛应用于企业级小程序管理系统中。

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