记录一个部门及部门人员选择的功能，效果如下：

组件用到了uni-ui的级联选择uni-data-picker

开发文档：uni-app官网

组件要求的数据格式如下：

后端使用的是fastadmin，需要用到fastadmin自带的tree类生成部门树 ，后端代码如下：

 /*** 获取部门及员工数据（树形结构）适用于uni-ui的uni-data-picker*/public function getDepartmentAndStaff(){// 获取所有部门（含层级关系）$departments = Db::name('wecom_department')->field('id, name, parent_id')->order('id ASC')->select();// 构建部门树$tree = new Tree();$tree->init($departments,'parent_id','    ');$treeList = $tree->getTreeList($tree->getTreeArray(210), 'name'); // 从顶级部门开始// 处理每个部门下的员工$result = [];foreach ($treeList as $dept) {$deptData = ['text' => $dept['name'],       // 前端显示名称'value' => 'dept_' . $dept['id'], // 部门唯一标识'children' => [],              // 子节点（员工或子部门）// 保留元数据（可选，前端如需区分部门/员工可使用）'meta' => ['type' => 'department','id' => $dept['id']]];// 查询部门下的员工（假设部门ID字段为department，需根据实际表结构调整）$staffList = Db::name('wecom_staff')->where('department', $dept['id']) // 员工表中部门关联字段->field('id, name')->order('id ASC')->select(); // 转换为数组// 转换员工数据格式$deptData['children'] = array_map(function ($staff) {return ['text' => $staff['name'],      // 员工显示名称'value' => 'staff_' . $staff['id'], // 员工唯一标识'isLeaf' => true,              // 标记为叶子节点（无子节点）'meta' => ['type' => 'employee','id' => $staff['id']]];}, $staffList);$result[] = $deptData;}$this->success('获取成功', $result);}

注意的点：tree->init()要传三个参数，特别是第二第三个参数，第二个参数应该为父id的字段名，第三个是空格占位符，默认是  在html会正常识别，但是小程序不行，所以要自己定义占位符。

tree类文件的注释也写的非常 清晰了。

设置了自定义占位符和默认的区别。

前端页面的调用，截取了部分：

<template><!-- 借用信息表单 --><view class="form-section"><view class="form-item"><text class="label">所属部门</text><uni-data-picker :localdata="departmentData" popup-title="请选择班级" @change="onchange"@nodeclick="onnodeclick"></uni-data-picker></view></view>
</template><script setup>import {ref,computed} from 'vue'import request from '@/utils/http2.js'const departmentData = ref([])onMounted(() => {// 加载部门树request({url: '/api/wecomapi/getDepartmentAndStaff',method: 'GET'}).then(res=>{if (res.code) {departmentData.value = res.data;}})})</script>