uni-data-picker 不能直接改样式因其内部结构封闭、不支持 slot 和细粒度 class 控制，强行覆盖易失效；推荐用 picker-view + 自定义列实现三端兼容、样式可控的多级选择器。
uni-data-picker 为什么不能直接改样式？
因为 uni-data-picker 的内部结构是封闭的，所有层级渲染、滚动逻辑、选中状态都封装在组件内部，只暴露有限的 props（比如 range、value），不支持 slot 插入自定义节点，也不开放 class 控制粒度。你用 CSS 强行覆盖 .uni-data-picker__column 这类类名，容易被后续版本更新破坏，iOS 下还常因原生 picker 渲染机制导致样式失效。
用 picker-view + 自定义列渲染最可控
这是目前在 H5、小程序、App 三端兼容性最好、样式自由度最高的方案。核心是自己管理每列数据、选中索引、加载状态，并用 picker-view 做滚动容器，每列用 picker-view-column 包裹一个 view 列表。
- 第一列初始化时加载全部一级数据（如省份），存到
columns[0] - 监听
bindchange事件，拿到当前列选中的detail.value，判断是否为最后一列有效选择 - 若需加载下一级（比如选了“广东”），清空后续列数据，设置
loadingFlags[1] = true，发请求获取城市列表，成功后赋值给columns[1]并重置该列选中索引为 0 - 每列
view中用v-for渲染项，通过:class绑定选中态，图标、文字颜色、背景全由你控制
注意：iOS 上 picker-view 滚动会触发多次 bindchange，必须加防抖（setTimeout + clearTimeout），否则重复请求或状态错乱。
异步加载时怎么避免重复请求和状态错乱？
用户快速连点两下“浙江省”，如果没做防护，会发两个请求，后返回的可能覆盖先返回的，导致第二列显示错误城市。关键点有三个：
- 每个节点加载前检查缓存：用
cacheMap对象记录{'330000': [{text: '杭州', value: '330100'}, ...]}，命中直接用 - 请求发起前加锁：设
isLoading[level] = true，bindchange触发时先判断，为 true 就 return - 响应返回后校验路径：请求回来的数据要匹配当前已选的上层路径（比如当前
selected[0] === '330000'才接受“浙江”的城市数据），否则丢弃
漏掉任意一点，上线后都会出现“点了A省却出来B省的城市”这类诡异问题。
多级深度不确定时，数组长度怎么动态管理？
像医院科室选择器可能有“医院→院区→科室→亚专科→诊疗组”，层级不固定。硬写五层 columns[0] 到 columns[4] 不现实，也浪费内存。
- 用一个响应式数组
columns，初始只有[firstLevelData] - 每次加载新层级，用
columns.splice(level + 1)截断后面所有列，再push(newData) - 选中状态也用数组
selectedIndex，长度始终与columns一致，未加载的层级对应索引保持-1
这种动态伸缩方式，既能支持 2 级省市区，也能撑住 8 级组织架构，关键是别忘了在 picker-view 的 value 属性里同步传入 selectedIndex 数组，否则某列滚动后其他列会跳回顶部。
真正麻烦的不是写完能跑通，而是处理“用户中途取消选择”“网络失败后重试”“不同用户权限看到不同子集”这些边界情况——它们不会报错，但会让业务方反复找你修“偶尔选不对”这种问题。
