uni-data-picker因一次性加载全部层级且不支持异步子节点加载,无法支撑八级动态分类;ba-tree-picker通过字段映射、扁平转嵌套、响应式数据适配后端树形结构;RegionPicker的缓存节流重试逻辑可封装为通用hook;混合选择需用多组件联动+栈式路径管理。

uni-data-picker 为什么撑不住八级动态分类?
它默认把所有层级数据一次性拉下来,遇到医疗机构科室选择这种「医院→院区→科室→子科室→专业组→病区→诊疗组→医师」的结构,光初始请求就卡死。更麻烦的是,uni-data-picker 不暴露子节点加载钩子,你没法在用户点到第三级时才去请求第四级——它只认静态 options 数组,不认异步 Promise。
用 ba-tree-picker 接真实后端树形数据要注意字段映射
后端给的 JSON 很少直接叫 id/name/children,常见的是 catId、catName、subList 这种。ba-tree-picker 的 valueKey、textKey、childrenKey 就是干这个的:
- 如果后端返回
{ catId: 123, catName: "心内科", subList: [...] },就配:valueKey="'catId'" :textKey="'catName'" :childrenKey="'subList'" - 扁平结构(带
pid)必须先用工具函数转成嵌套结构,ba-tree-picker 不处理 pid 模式 -
localdata必须是响应式数据,直接传ref([])或computed,别传普通数组
RegionPicker.vue 的街道级缓存和重试机制怎么复用到自定义组件?
地址级联组件里那套「街道数据缓存 + 350ms 请求节流 + 失败自动重试」逻辑,其实可以抽成通用 hook。关键点在于:
- 缓存键要包含父级 code,比如
cacheKey = `${parentCode}_streets`,避免不同区县的街道数据混用 - 节流不能只靠
setTimeout,得用队列 + 状态锁,否则快速连点三级会发多个并发请求 - 重试时要清掉当前层级的 loading 状态,不然 UI 卡在“加载中”不动
这些细节在 RegionPicker.vue 的 loadChildren 方法里都写了,但没文档说明——直接扒源码比看 README 有用。
多选末级 + 单选上级的混合模式怎么绕过 uView picker 限制?
uView 的 u-picker 原生不支持某列多选、某列单选。真要实现「一级选家电、二级选厨房电器、三级可多选电饭煲+微波炉」,得自己封装三层联动逻辑:
- 用三个独立的
u-picker组件,通过v-model和@change手动同步状态 - 第三级改用
u-checkbox-group+u-scroll-view滚动列表,而不是 picker 列 - 选中路径用数组栈管理:
['家电', '厨房电器', ['电饭煲', '微波炉']],输出前再 flatten
这种方案看似笨重,但比硬改 uView 源码稳定得多——毕竟它的 picker 内部状态机没开放外部控制入口。


















