记录一个部门及部门人员选择的功能，效果如下：
组件用到了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>
